idcreatv's avatar

Individual uploads via Ajax to prevent timeouts etc

I have a client who needs to upload large amounts of images at the same time ("busy, busy, busy - I just want to 'select all' and have them all upload, all 100 (or so) of them" - that type of thing.).

Initially he wanted to upload one image, all of a sudden its over 100! I can simply change it to upload multiple files but since some of the files could be over 8mb I was thinking in order to prevent timeout issues and long script executions, I could just loop through the files in the browser and upload them one by one via jQuery.

The thing is, whilst its easy enough to loop through them all, I'm not sure how to 'grab' and send up each file which has been selected via the file input (multiple).

My form is as follows:

<form role="form" name="photographUploadForm" method="post"  enctype="multipart/form-data">

My file input is:

<input type="file" name="upload_new_photograph" id="upload_new_photograph" multiple>

My ajax call contains the following:

      $("#upload-photograph-button").click(function (e) {
        e.preventDefault();
        
        var files = $('#upload_new_photograph')[0].files;
        
        for(var i = 0; i<files.length; i++){
    // Lets grab the name and size to make sure they're looping correctly
          console.log(files[i].name+'----'+files[i].size);

          $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
          });
          var form = document.forms.namedItem("photographUploadForm"); // Name of form
          var formData = new FormData(form);
          $.ajax({
            type: 'post',
            url: 'urlgoeshere',
            dataType: 'json',
            contentType: false,
            data: formData,
            processData: false,
            success: function(returnedData){

… etc

The above will loop through the multiple images (and log the individual names) correctly but (obviously) only uploads the same image multiple times, so I need to only upload each respective file contained in the loop.

Can anyone advise how I would do this (or if there's an alternative way of getting around timeout and script execution times)?

Any help most appreciated!

P.S. I'd rather not edit the server configuration to allow scripts to run for really long times etc

0 likes
5 replies
Snapey's avatar

use a plugin like dropzone. This will do all the sending for you.

idcreatv's avatar

Looks interesting, however via ajax I'm also sending up some other data (I omitted this from the code above so as not to confuse things) which is used to generate a database entry (plus rename the file etc) - would dropzone be able to handle this extra data?

PS, just for my own knowledge, I'd be interested how I could extract the individual files from formData, especially since the bulk of the code is already written.

Snapey's avatar

dropzone will send the images on by one to an endpoint our specify. The other ajax data would be sent separately. The trick is to send something with the image so that the controller knows what it relates to.

idcreatv's avatar

Hmmm, I'll have to look into this and see how I get on. Will mark this as accepted if all goes well (or I find an alternative way of doing it, in which case I'll detail it). Cheers @snapey.

idcreatv's avatar
idcreatv
OP
Best Answer
Level 3

Okay, here's what I did. I just converted them to Base64 in the browser, pinged them up to the controller and used Intervention to generate the image and thumbnails as usual.

Did a test with 200 images (more than would be uploaded in one go) and had no timeout errors etc.

I'm sure there's probably a better way but this seems to do the trick for now.

Please or to participate in this conversation.