javascript - Set random file name when upload file to AWS S3 with pre-signed POST url -

i use signed post url jquery-file-upload upload image aws s3 directly.

it work fine on pc, when test iphone, fine out ios upload picture same name image.png or image.jpeg.

that make image upload finished last replace image upload successed before it.

i generate presigned post boto3 in python3 this:

post = s3.generate_presigned_post(     bucket='?????????',     key=get_random_string(8,'simple') + '/${filename}',     fields={         'success_action_status': '201',         'acl': 'public-read'     },     conditions=[{             'success_action_status': '201'         },         {             'acl': 'public-read'         },         ["starts-with", "$content-type", ""]     ] ) post['fields'] = json.dumps(post['fields']) 

and here javascript code:

$(function () {     'use strict';      var form = $('#fileupload');     // initialize jquery file upload widget:     $('#fileupload').fileupload({         dropzone: $('#dropzone'),         previewmaxheight: 300,         previewmaxwidth: 300,         acceptfiletypes:  /(\.|\/)(gif|jpe?g|png)$/i,         datatype: 'xml',         getfilesfromresponse: function (data) {             var key = $(data.jqxhr.responsexml).find("key").text();             var url = $(data.jqxhr.responsexml).find("location").text();             return [{                 url: url,                 name: key,                 thumbnailurl: url,             }];         },     }).on('fileuploadsubmit', function (e, data) {         data.formdata = (function (form) {             var r = form.serializearray();             $.each(form.data('theform-data'), function(k, v) {                 r.push({name: k , value: v})             });             return r;         })(data.form);         data.formdata.push({name: "content-type" , value: data.files[0].type});     }); }); 

the get_random_string(8,'simple') in python can prevent same file name in different upload, cannot prevent same file name when user upload multifile @ same time (because upload same pre-signed post url).

so wonder if there has way can set random file name when upload file aws s3 pre-signed post url?

i found out work:

$(function () {     'use strict';      var form = $('#fileupload');     // initialize jquery file upload widget:     $('#fileupload').fileupload({         dropzone: $('#dropzone'),         previewmaxheight: 300,         previewmaxwidth: 300,         acceptfiletypes:  /(\.|\/)(gif|jpe?g|png)$/i,         datatype: 'xml',         getfilesfromresponse: function (data) {             var key = $(data.jqxhr.responsexml).find("key").text();             var url = $(data.jqxhr.responsexml).find("location").text();             return [{                 url: url,                 name: key,                 thumbnailurl: url,             }];         },     }).on('fileuploadsubmit', function (e, data) {         data.formdata = (function (form) {             var r = form.serializearray();             $.each(form.data('theform-data'), function(k, v) {                 if (k == "key") {                     var filename = v.split("/");                     var random_prefix = filename[0];                     var ext = data.files[0].name.split(".").slice(-1)[0];                     v = random_prefix + '/'                         + (function (length, chars) {                             var result = '';                             (var = length; > 0; --i) result += chars[math.floor(math.random() * chars.length)];                             return result;                         })(10, '0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz')                         + '.' + ext.tolowercase();                 };                 r.push({name: k , value: v})             });             return r;         })(data.form);         data.formdata.push({name: "content-type" , value: data.files[0].type});     }); });