How to upload multiple files to Amazon S3 using jQuery-File-Upload

[arif]

Hi there,

             I want to upload multiple files to Amazon S3 , asynchronously  using their  browser based form based post approach.

as mentioned here.   http://doc.s3.amazonaws.com/proposals/post.html

I tried their sample and it works fine for me. 

Now i want to create a page that could 

1) Allow user to select multiple files. ( or drag and drop) 

2) Once selected ...immediately start uploading them asynchronously.

3) For each file create some HTML element and  have that binding .... element to upload....

4) At bottom of page or somewhere else i want to show the long progressbar, that tells the overall status of multiple files.

I was wondering if this will be possible with this jQuery-File-Upload. 

I am newbie to web development, learning JavaScript, JQuery,BootStrap etc. 

I see the demo page of jQuery-File-Upload, its really cool, but my UI is not going to be the same.  ( for example I dont want start button in front of every file name, nor I want the delete buttons ) 

I am not sure where to begin with and how to begin with..

[rif]

Hello There,

                  I downloaded the plugin and 

1) tried running it from File:///c:<pathToIndex.html> but it did not work,  consol showed error that jQuery is not defined 

    I changed following script inclusion 

   <script src="/ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

   to this 

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

   that error went but then i started getting some other error which was perhpas due to permission error while running the widget from file:///

2)  I then hosted this widget to wamp server, www folder and started server and launched the index.html from localhost now.

    now its working fine but its uploading to localhost/server/php , not to the http://jquery-file-upload.appspot.com/

3) I still went ahead and changed the form action to https://verse.author.uploads.test.s3.amazonaws.com/

    and then added fowlloing additional input fields to form 

        <input type="hidden" name="key" value="somevalue">

        <input type="hidden" name="acl" value="public-read"> 

        <input type="hidden" name="AWSAccessKeyId" value="mykey"> 

        <input type="hidden" name="policy" value="mypolicydocument">

        <input type="hidden" name="signature" value="mysignature">

    and then tried it again.it works but it again uploads to same localhost/server/php  not to amazon server :-( 

    I looked at Chrome's network monitor  and saw the post request.... the way multpart/form-data is going is correct , but the problem is its going to incorrect place.

Will appreciate any help.

-Arif 

On Tuesday, 18 December 2012 20:27:55 UTC+5:30, arif wrote:

Hi there,

             I want to upload multiple files to Amazon S3 , asynchronously  using their  browser based form based post approach.

as mentioned here.   http://doc.s3.amazonaws.com/proposals/post.html

I tried their sample and it works fine for me. 

Now i want to create a page that could 

1) Allow user to select multiple files. ( or drag and drop) 

2) Once selected ...immediately start uploading them asynchronously.

3) Fore each file create some HTML element and  have that binding .... element to upload....

[rif]

Hello there,

                figure out this as well.  in main.js option url was set to server/php, changed it to https://mybucket.s3.amazonaws.com/'

it started sending to amazon S3 but now I am getting following error on reload of page.

XMLHttpRequest cannot load https://verse.author.uploads.test.s3.amazonaws.com/. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

After that when i try to add file, its make HTTP-Option request to Amazon S3, while i was expecting it will make HTTP-Post Request and send the form data.

After HTTP-Option i again see the same "Origin http://localhost is not allowed by Access-Control-Allow-Origin."

I am using Google Chrome latest version

[rif]

Hi All,

         Well i solved "Access-Control-Allow-Origin" problem also myself. 

Now post request is going ...but now the next problem is post request that's going .... name field in multipart/form-data  for the file content is going as "files[]"

while it should go as "file"  

=================== current  -start ==========================

------WebKitFormBoundaryaacg8u7texMNObyL

Content-Disposition: form-data; name="files[]"; filename="Koala.jpg"

Content-Type: image/jpeg

=================== current  -end ==========================

=================== expected-start ==========================

------WebKitFormBoundaryaacg8u7texMNObyL

Content-Disposition: form-data; name="file"; filename="Koala.jpg"

Content-Type: image/jpeg

=================== expected-end ==========================

[Arif Ali Saiyed]

Well resolved this as well.  had to change the name of field in form. thats it now uplaod to Amazon S3 is working fine.

-Arif 

--
You received this message because you are subscribed to the Google Groups "jQuery-File-Upload" group.
To post to this group, send email to jquery-f...@googlegroups.com.
To unsubscribe from this group, send email to jquery-fileupl...@googlegroups.com.
Visit this group at http://groups.google.com/group/jquery-fileupload?hl=en.
 
 

[Arif Ali Saiyed]

Well resolved this as well.  had to change the name of field in form. thats it now uplaod to Amazon S3 is working fine.

-Arif 

On Thu, Dec 20, 2012 at 8:21 PM, rif <arif.a...@gmail.com> wrote:

[sachin taware]

Hello Arif,

I am working on the same feature using this plugin and stuck at a point.I would like to know if you used PHP on the server side.If yes what changes you had to make to the `UploadHandler.php` file for the upload url and upload path.

Please revert if you can help in any ways.Your inputs might take me on the right track.

Thanks

Sachin