Closed
Bug 1506346
Opened 6 years ago
Closed 4 years ago
FormData().append() causes AngularJS restart with third name parameter
Categories
(Developer Documentation Graveyard :: API: DOM, enhancement, P3)
Tracking
(Not tracked)
RESOLVED
WONTFIX
People
(Reporter: mimosh_pisholack, Unassigned)
References
()
Details
(Whiteboard: [specification][type:bug])
What did you do? ================ append file to formData with 3 parameter instead of 2... var form = angular.element("<form/>"); var ImageURL = obj.data || obj.src; // Split the base64 string in data and contentType var block = ImageURL.split(";"); // Get the content type of the image var contentType = block[0].split(":")[1];// In this case "image/gif" // get the real base64 content of the file var realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...." // Convert it to a blob to upload var blob = b64toBlob(realData, contentType); // Create a FormData and append the file with "image" as parameter name var formDataToUpload = new FormData(form); formDataToUpload.append("image", blob, obj.name); //formDataToUpload.append("image", blob); //Now that the FormData has a file you only need to submit it asynchronously using jQuery $http({ method: scope.method, url: scope.url, data: formDataToUpload, headers: {'Content-Type': undefined}, transformRequest: angular.identity }).then(function (data) { //scope.previewData.remove(obj); obj.isUploaded = true; data.preventDefault(); }, function (err) { }); What happened? ============== page refresh after ajax success of angularjs $http service What should have happened? ========================== single page application should never refresh if it's not needed or designated... Is there anything else we should know? ====================================== whole story: i was looking for a dynamic image uploader, which i found, then i start fixing it and changing the upload way to my way of need... using blob file... i had no issue, but the file name keep on being "blob", so i wanted to append the file name, in case someday somebody report a issue, it could be easier to detect... so last resort i found which did worked and had most browser compatibilty, was to use: formDataToUpload.append("image", blob, obj.name); and it worked but suddenly application start to misbehave, when the result came back, right after success function of angularjs $http service, the whole application get restarted (page refreshed).... i tried several thing, and only thing cause this was the FormData append, using 3 parameter, instead of 2...
Reporter | ||
Comment 1•6 years ago
|
||
Agent: Chrome 70.x also test on firefox, though it didn't accept parameter in FormData(<here>), yet , it made form to refresh on use of three parameter append, but not two.
Comment 2•6 years ago
|
||
There's an MDN page for using FormData [1] that matches your explanation: > When using the append() method it is possible to use the third optional parameter to pass a filename inside the Content-Disposition header that is sent to the server. When no filename is specified (or the parameter isn't supported), the name "blob" is used. MDN Web Docs covers standard web technologies, and you are using two libraries (Angular and b64-to-blob [2]) that are not built into web browsers. This bug will probably get closed as invalid because it is out of scope for MDN. This feels like a great StackOverflow [3] question, and can be tagged to get the attention of the AngularJS community. Searching for "file upload with angularjs" gives some useful results [4]. Looking at your code, I can see a few things to investigate: 1) What is obj.name? Passing an empty string, a UTF-8 encoded binary string, a string with spaces, or "undefined" could cause issues. I'd start with a known string, like "test.jpg", to eliminate unknown value problems, and then work to dynamically get the filename if provided. 2) b64-to-blob says it only works in the browser, because node.js doesn't have blobs. This appears to be browser code, but I'm not sure if similar tools are used on the server side, but it could be choking on Blobs with names. [1] https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects [2] https://www.npmjs.com/package/b64-to-blob [3] https://stackoverflow.com/ [4] https://stackoverflow.com/questions/18571001/file-upload-using-angularjs#20506037
Component: API → API: DOM
Product: developer.mozilla.org → Developer Documentation
Updated•6 years ago
|
Summary: Append misbehave → FormData().append() causes AngularJS restart with third name parameter
Reporter | ||
Comment 3•6 years ago
|
||
the obj.name is always filled with data, and contain file name on disk... when i pass it to server the name comes up, but once reterned success status code, just after processing success block of code, it crash. Yes it is NOT NodeJS, and it's browser code, i use a MVC - Web API 2 - Controller for handling request... is MDN solely about NodeJS? since in any js search it comes up and i always use it for browser compatibility check or find a way to use code,... it's links always came up...
Updated•6 years ago
|
Priority: -- → P3
Comment 4•4 years ago
|
||
MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.
Status: UNCONFIRMED → RESOLVED
Closed: 4 years ago
Resolution: --- → WONTFIX
You need to log in
before you can comment on or make changes to this bug.
Description
•