Direct Upload without Uppy?

[Scott Knight]

Does anyone have any examples of S3 direct upload without Uppy or other js libraries?

My app currently has several uploaders using jquery fileupload and I'd like to upgrade it using modern javascript and get away from jquery. 

I'm not sure I really need a separate library because right now I'm simply hiding the file field input, using a custom styled button to trigger the input, using a custom progress bar etc. Jquery fileupload is just helping with the 'add', 'progress', and 'done' events.

It seems like with Uppy you need to use their full dashboard, dropzone or at minimum the Uppy supplied file field input and I would like to rewrite my existing basic implementation but without jquery fileupload.

Would it be best to stick with Uppy, or it is possible to implement with formData, XMLHttpRequest, etc. or Axios, or even Rails.ajax?

Thanks!

Scott

[Scott Knight]

I just posted the following in the Uppy support forum. Adding it here for more context if anyone has some insight:

 

Uppy without dashboard or fileinput  

I’m trying to get started using Uppy. All of the examples either use dashboard, drag n drop, fileinput etc.
Is it possible to have an existing file input field trigger the uppy upload? I would prefer to style my own button that triggers a click on the file field or trigger uppy.
Basically, I want to use the functionality of Uppy core but without any of the UI elements so I can use my own.

[Janko Marohnić]

Uppy actually doesn't require you to use any of their "source" plugins (Dashboard, Drag&Drop, File Input etc), you can queue files yourself via uppy.addFile(). For example:

  var uppy = Uppy.Core({ ... })

    // ... plugins ...

  fileInput = document.getElementById('your-file-input')

  fileInput.on('change', () => {

    fileInput.files[0].forEach(file => uppy.addFile(file))

  })

I would really recommend staying with Uppy. For one, I found its "destination" plugins (XHRUpload, AwsS3 etc) the easiest to integrate with Shrine's upload/presign endpoints from any other JavaScript file upload library. For example, with Dropzone.js I could figure out how to tell it to request S3 upload params for each file separately; I don't know how people manage to correctly use Dropzone.js with direct uploads to S3. Compare that with Uppy which already knows about this flow, and you don't even need to write the AJAX request.

Uppy also has events for hooking up your own progress bars, so you shouldn't have any problems there. In general I feel like you can always drop to the level of abstraction that you need.

Hope that helps.

Kind regards,

Janko

--
You received this message because you are subscribed to the Google Groups "Shrine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ruby-shrine...@googlegroups.com.
To post to this group, send email to ruby-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/ruby-shrine/cee1ef1e-a3ee-4878-b2fe-c5636b0b93a9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Scott Knight]

This is exactly the info I was looking for!

I guess I was just struggling a bit with figuring out the Uppy API using their examples, I will try uppy.addFile() and keep working on it.

Thanks Janko!

On Saturday, June 15, 2019 at 2:00:13 PM UTC-7, Janko Marohnić wrote:

Uppy actually doesn't require you to use any of their "source" plugins (Dashboard, Drag&Drop, File Input etc), you can queue files yourself via uppy.addFile(). For example:

  var uppy = Uppy.Core({ ... })

    // ... plugins ...

  fileInput = document.getElementById('your-file-input')

  fileInput.on('change', () => {

    fileInput.files[0].forEach(file => uppy.addFile(file))

  })

I would really recommend staying with Uppy. For one, I found its "destination" plugins (XHRUpload, AwsS3 etc) the easiest to integrate with Shrine's upload/presign endpoints from any other JavaScript file upload library. For example, with Dropzone.js I could figure out how to tell it to request S3 upload params for each file separately; I don't know how people manage to correctly use Dropzone.js with direct uploads to S3. Compare that with Uppy which already knows about this flow, and you don't even need to write the AJAX request.

Uppy also has events for hooking up your own progress bars, so you shouldn't have any problems there. In general I feel like you can always drop to the level of abstraction that you need.

Hope that helps.

Kind regards,

Janko

On 15 Jun 2019, 04:24 +0200, Scott Knight <scotte...@gmail.com>, wrote:

I just posted the following in the Uppy support forum. Adding it here for more context if anyone has some insight:

 

Uppy without dashboard or fileinput  

I’m trying to get started using Uppy. All of the examples either use dashboard, drag n drop, fileinput etc.
Is it possible to have an existing file input field trigger the uppy upload? I would prefer to style my own button that triggers a click on the file field or trigger uppy.
Basically, I want to use the functionality of Uppy core but without any of the UI elements so I can use my own.

--
You received this message because you are subscribed to the Google Groups "Shrine" group.

To unsubscribe from this group and stop receiving emails from it, send an email to ruby-...@googlegroups.com.