AJAX Javacript multiple file upload

[Bl4ckMaj1k]

So I have a very unique issue for a project I am working on and I cannot seem to figure it out. I will try my best to explain the task at hand.

 

I need to create an image uploader that will allow users to upload multiple images. Upon upload of their images, they will be required to submit a caption. Upon caption submission, the form will be sent to a script in our CMS (we use a provided CMS where code is extremely strange and out of our control). I have gotten this to work successfully using a single file upload, but whenever I attempt to run multiple files, I get a system error in our CMS.

 

I think a little back story can help you all to understand the situation a bit more. Before I got this project thrown at me, our company used some Yahoo multi file uploader with all the bells and whistles and things that make people smile. Well the problem is, the smiles started to go away when every one of our customers began complaining about files not uploading correctly. So my boss came to me (the so called nerd of the office) and asked if I knew anything about file uploads. Of course, I replied. But I had no idea what they were looking to do. He then explained the issue and asked if I thought I could duplicate what they currently had. Anyone in Corporate America knows that I should've said no, but they also understand the importance of me saying, yes.

 

In any event, it could possibly be my a** if this thing isn't functioning by COB Monday! I have all weekend to figure this thing out. Any help would be greatly appreciated.

 

My Form

I have a simple html form. It simply grabs the file and sends it to the server using a script provided to us by our CMS. We will never see what this script looks like but we do know that it works (seeing as the Yahoo file uploader worked...yes there were errors sometimes but overall it worked). So in the end, my HTML looked as follows:

 

<form id="myForm" action="some_crazy_url/to_our_cms/file_uploader" method="post" enctype="multipart/form-data" target="hiddenframe">
	<input type="file" multiple="multiple" id="file_1" name="data" /> 
       	Caption: <textarea name="caption"></textarea> 
    	<input type="submit" value="Submit Comment" /> 
</form>  

<iframe style=”width:300px;height:300px;border:0px;” name="hiddenframe" id="hiddenframe_obj" />

 

The name of the input field HAS to be 'data', that's how it returns info to the CMS. The required fields are 'data', and 'caption', both of which I have. When you submit this form, the following information is returned:

 

{"caption": "Hello", "moderation": "unsaved", "photo_id": "urn:uuid:6690eb9e-e629-11e0-a41f-b8ac6f16d83d", "urls": {"thumbnail": "IGNORE THIS URL?callout_id=463300584&key=thumbnail&index=urn:uuid:6690eb9e-e629-11e0-a41f-b8ac6f16d83d", "full": "IGNORE THIS URL?callout_id=463300584&key=full&index=urn:uuid:6690eb9e-e629-11e0-a41f-b8ac6f16d83d", "original": "IGNORE THIS URL?callout_id=463300584&key=original&index=urn:uuid:6690eb9e-e629-11e0-a41f-b8ac6f16d83d", "sample_photo": "IGNORE THIS URL?callout_id=463300584&key=sample_photo&index=urn:uuid:6690eb9e-e629-11e0-a41f-b8ac6f16d83d"}}

 

NOTE: IGNORE THIS URL was actually a full blown URL but I removed it for obvious policy reasons.

 

To me, this looks like some type of JSON feed which is good. It found the two variables successfully and is ready to be saved. I understand how to get to this step when there is only one file I am dealing with. But how can I do this for multiple files? I have tried the following with my HTML and neither worked:

 

<form id="myForm" action="some_crazy_url/to_our_cms/file_uploader" method="post" enctype="multipart/form-data" target="hiddenframe">

	<input type="file" multiple="multiple" id="file_1" name="data" /> 
	<input type="file" multiple="multiple" id="file_2" name="data" /> 
       	Caption: <textarea name="caption"></textarea> 
    	<input type="submit" value="Submit Comment" /> 
</form>

<iframe style=”width:300px;height:300px;border:0px;” name="hiddenframe" id="hiddenframe_obj" />

 

also tried...

 

<form id="myForm" action="some_crazy_url/to_our_cms/file_uploader" method="post" enctype="multipart/form-data" target="hiddenframe">

	<input type="file" multiple="multiple" id="file_1" name="data[]" /> 
       	Caption: <textarea name="caption"></textarea> 
    	<input type="submit" value="Submit Comment" /> 
</form>

<iframe style=”width:300px;height:300px;border:0px;” name="hiddenframe" id="hiddenframe_obj" />

 

Both of these return errors. I have posted them below responsibly:

 

1.)

{"success": false, "error": "AttributeError: 'list' object has no attribute 'read'"}

2.)

{"success": false, "error": "TypeError: Missing argument to upload_photo(): data"}

 

I understand that my files are being processed correctly when processing one by one. This has to mean that it is possible to run some sort of script that allows for multiple versions of these files to be processed. I have some javascript/jquery/ajax know how, but not enough to understand what needs to be done here. I will be on this computer all day attempting to figure this thing out (there goes the weekend). I will reply to your responses, suggestions, tests immediately as well as expose as much information as I can without breaching policy. As I said before, any help would be greatly appreciated. Also, if you have any questions regarding anything I have went over in my question (regarding the CMS, form submission, deadline, my system, anything), feel free to ask. Fingers crossed! And as always, thanks in advance!!

 

BlkMaj

[Bl4ckMaj1k]

OK how about a simplified version of this question...

 

How would I make a file uploader with the same 'name' value (i.e. form name="data") loop through and send multiple files, one at a time?

[nogray]

When you try to upload multible files, you need to use a array as the name for the input field

<input type="file" name="my_file[]" />

In your php, you $_FILES['my_file'] should be an array of files, so instead on uploading it once, you would loop through it using a foreach statment

foreach ($_FILES['my_file']  as $file){
    // upload $file
}

 

In some servers, using a array name for the input field doesn't work. You get a "string" value "Array" instead of arrays. In that cause, you can use a standard name (e.g. my_file_## where ## is a unique number) and do a foreach loop for the $_FILES and upload all that matches that name, or loop through the $_FILES and upload everything.

 

Sam

[Bl4ckMaj1k]

Hi Sam thanks for the reply. I sort of understand this thing a tad bit better, but still confused on some stuff.

 

To start, I will say whenever I add 'files[]' (note the added brackets), I get an error. Its only when I submit one item at a time that I actually get the results I am looking for. So, is there a way to loop through each file and submit one at a time? This time, I can use the same element 'name="data"' without JS thinking I want to create an array. I don't know why, but arrays seem to error out. Only submitting one file at a time works in this case. However, I believe there is a way to take multiple files and sit them in sort of a que...this way, they come through the list and technically get uploaded one at a time. Not like an array, but just a step by step process. From there I gather all response data and save it all. Can this be done?

[nogray]

You actually need to edit your PHP file on the server to handle the files array. It seems your PHP script is only looking for one input file called data. If you want to do it with JavaScript, the form will have one file input. Add an onsubmit event to the form that create a new iframe, change the form target to the new iframe. After the form is submitted, you would reset it.

 

You can remove the iframe after you get your results.

[Bl4ckMaj1k]

Yea no dice there. I don't have access to the file that is actually handling the upload process. My CMS is doing something in Python I believe. I have figured out a way to get my client to upload only one file at a time, however, I can't seem to figure out how to pass the appropriate variables to my CMS' script. For example, they require 'data' and 'caption'.

 

$.ajax(function(){

    url: '',

  type: '',

  data: {},

});

 

I don't know what to add to this portion of my new code to include the caption element.