Form won't append image correctly

@leonardofmed wrote:

I use an algorithm that turns an image in a Blob through its URI, then adds it to a Form and sends it to the server. Until yesterday everything was working normally, but it just stopped working. I tried to revert to a previous edition, but error continues even in that version! The problem is not on the server because all other data is received normally and nothing has been changed on that side. I really can’t understand what happened.

My code is like this:

// Read all images and append to a form data
syncImages() {
	let formData = new FormData();
	this.images.forEach((value, index, array) => {
		this.dataURItoBlob(value.filePath).then(returnedBlob => {
			let imageBlob = new Blob([returnedBlob], {type: "application/octet-stream"});
			formData.append('image', imageBlob, value.name);
			formData.append('pointId', value.pointId); 
		}).then(() => {
			// Send to DB only in last iteration
			if (index === array.length - 1) { 
				this.sendImagesToDB(formData);
			}				
		});
	});	
}

If I log the returnedBlob or imageBlob here I can see the Blob file with its correct size, but if I log the formData it returns empty! The sendImagesToDB is just a HTTP POST that sends the formData to DB. I’m not receiving any errors. The maddening part is that this same code was working perfectly yesterday. I modified the response from my server to simply display what was being received (var_dump), and what I am getting is just the name of the image:

array(1) {
  ["image"]=>
  array(5) {
    ["name"]=>
    string(17) "1571096712173.jpg"
    ["type"]=>
    string(0) ""
    ["tmp_name"]=>
    string(0) ""
    ["error"]=>
    int(1)
    ["size"]=>
    int(0)
  }
}

Another particularity that I noticed is that before I could see these answers by the console itself, in the “Network” tab (I use Google Dev Tools for this), now I can only see the response through what is returned by the observable HTTP POST.

Posts: 1

Participants: 1

Read full topic