Best practice for a facebook like feed of posts


#1

Hello everyone.
I’m integrating Transloadit assemblies and Uppy client on a PHP7 website.
I would like users to upload either videos or images from their devices.
A PHP form will write the post information by making use of hidden fields and files will be stored in a S3 bucket.

I would like to know if it’s possible to let people upload videos or images, generate a fast enough thumbnail and then send them elsewhere without having to wait for the actual encoding.

They might be redirected to the actual posts listing and see the thumbnail with a watermark indicating is still generating the encoded video, or something like that.

Can anyone point me in the right direction?
What should I include in my template/assembly instructions?

This is my actual script…

const uppy = Uppy.Core({
debug: true,
autoProceed: true,
})
.use(Uppy.Transloadit, {
params: {
auth: {
// To avoid tampering use signatures:
// https://transloadit.com/docs/api/#authentication
key: ‘xxxxxxxxx’
},
template_id: ‘xxxxxxxxx’
},
waitForEncoding: false,
})
.use(Uppy.FileInput, { target: ‘.UppyInput’, pretty: true })
.use(Uppy.StatusBar, {
target: ‘.UppyInput-Progress’,
hideUploadButton: true,
hideAfterFinish: true
})
.on(‘transloadit:result’, function (stepName, result) {
var file = uppy.getFile(result.localId)
var resultContainer = document.createElement(‘div’)
resultContainer.innerHTML =

if picture show a `<figure>` markup.
indent preformatted text by 4 spaces
if video show html5 video tag with either android, iphone, web optimization.

  document
.getElementById('uppy-transloadit-result')
.appendChild(resultContainer)
})
  </script>t
                .getElementById('uppy-transloadit-result')
                .appendChild(resultContainer)
        }) <
        /script>t
                .getElementById('uppy-transloadit-result')
                .appendChild(resultContainer)
        }) <
        /script>

#2

Hi there, I think I also spoke on support with you. So I think the idea is you’ll want your users to be on their way after they upload. You don’t want to make them wait on the encoding. So you’ll set waitForEncoding to false, and use notify_url which Transloadit will ping with the Assembly Status in a JSON encoded string inside a form field called transloadit. Your backend will read and parse the string, loop over the results, save them in your database. Optionally you ping the frontend via a websocket that there is an update.

Your wall page will query the database and show the results.

Does that help?


#3

Thanks Kev. You’ve been helpful. I will need to scratch my head a bit on how to implement the import script but at least now the workflow is clear for me.


#4

Hi Kev. Is it possible to write at least the ID of the original file being uploaded, once upload is completed, to a hidden input so later I could make use of it to match the DB updates?


#5

I see what you’re saying, we’ve had a similar request and I just wrote an entry in our FAQ about this: https://transloadit.com/docs/faq/get-result-link-immediately/

In short: If your usecase is linear (you don’t spawn a tree/graph of jobs, but every single input has a single output, and you don’t send multiple inputs in one go) your proposed workaround applies, yes :slight_smile:


#6

Lovely. Thanks. I will try this.


#7

Hi. I almost made it.
I was wondering though if it’s possible to dynamically set the waitForEncoding option to true or false based on file being selected. I wish I don’t have to have two separate buttons.