How to append file upload paths to a Form using JavaScript?

Question

Below is some jQuery/JavaScript code I have that handles file uploads on a Form I have. The user can upload as many files as they need to, after they upload a file, I show a preview image of the uploaded file in a Div.

What I need help with, is I need to somehow add the files that are uploaded, to a hidden form field so when they submit the Form, it will post the file name/path of each file that was uploaded with the other Form data to my backend PHP script.

I'm just not sure on the best way to do this?

I was thinking something like this might work...

<input type="text" name="uploads[]" id="uploads" value="FILE PATH HERE">

But i'm not sure if this would overwrite previous values each time a new file was added if there is more then 1 upload?

Any ideas on how to handle this? All I really need is to access the filename of each uploaded file in the backend once the Form is submitted.

jQuery(function () {
    jQuery('#fileupload').fileupload({
        url: '<?php echo Mage::getUrl('signwizard/index/saveFile') ?>',
        sequentialUploads: true,
        dataType: 'json',
        dropZone: jQuery('#dropzone'),
        pasteZone: jQuery(document),
        autoUpload: true,

        done: function (e, data) {
            jQuery.each(data.result.files, function (index, file) {
                jQuery('<div/>').html('<img src="/channelUploads/thumbnail/'+file.name+'"> '+file.name).appendTo(jQuery('#imageContainer'));


                // Add Uploaded image path and name to a Form field so thatr the file path will be posted when the Form is submitted.....

            });
        }
    });
});

Your suggested input should work fine* - did you try it? *you should not duplicate the id, and should probably use type="hidden" — Steve
– Steve, Commented Sep 10, 2014 at 16:08

Steve · Accepted Answer · 2014-09-10 16:15:47Z

1

To elaborate on my comment, as long as you append a new input for each file, you are good to go:

done: function (e, data) {
    jQuery.each(data.result.files, function (index, file) {
         jQuery('<div/>').html('<img src="/channelUploads/thumbnail/'+file.name+'"> '+file.name).appendTo(jQuery('#imageContainer'));

         jQuery('#yourformid').append('input type="hidden" name="uploads[]" value="'+file.name+'">');

     });
}

answered Sep 10, 2014 at 16:15

Steve

20.5k5 gold badges47 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harsh Patel · Accepted Answer · 2022-01-11 10:54:13Z

0

just append a new input for each file, (jQuery v3.6.0)

done: function (data) {
     $.each(data, function(index, value) {    
         $('#yourformid').append('<input type="hidden" name="uploads[]" value="'+value.fileName+'">');

     });
}

edited Jan 11, 2022 at 10:54

answered Jan 7, 2022 at 10:19

Harsh Patel

1,43414 silver badges27 bronze badges

2 Comments

Luca Kiebel Over a year ago

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Harsh Patel Over a year ago

@LucaKiebel yeah dude, actually I doesn't given explanation because of busy schedule, but I updated my answer at moment. thanks

Collectives™ on Stack Overflow

How to append file upload paths to a Form using JavaScript?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related