14 Replies - 3468 Views - Last Post: 12 April 2018 - 10:45 PM

#1 Foobarer   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 269
  • Joined: 28-March 17

Convert base64 blob data to PHP $_FILES data

Posted 11 April 2018 - 12:05 AM

I have a piece of Javascript code that saves a selected form image as a blob, and I need to send it to a PHP uploading script.
The Javascript code saves the image data like so:

$("#form").submit(function(e){
	e.preventDefault();
	//Get cropped image base64 string
	var base64 = $("#png").val();
	//Remove base64 string value from #png input to prevent it form being sent
	$("#png").val("");
	//Get formdata
	formData = new FormData($(this)[0]);
	//Convert base64 string to file blob
	var blob = dataURLtoBlob(base64);
	//Add file blob to the form data
	formData.append("image[]", blob);
	$.ajax({
		url: "Images/uploadImage.php",
		type: "POST",
		data: formData,
		contentType: false,
		cache: false,
		processData: false,
		success: function(data){
					alert("Success");
				}, // more stuff below




And the PHP uploading script uploadImage.php expects the image like this:

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_FILES['image'])) {
     //uploading script here..




The problem is that I do get the "Success" alert from the jQuery code, but nothing happens, the image won't upload. I think it has to do with the fact that each sends different data types? Is there a way I can make it work?

Thanks

This post has been edited by Foobarer: 11 April 2018 - 12:07 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Convert base64 blob data to PHP $_FILES data

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4244
  • View blog
  • Posts: 13,449
  • Joined: 08-June 10

Re: Convert base64 blob data to PHP $_FILES data

Posted 11 April 2018 - 12:19 AM

Only a file input element would push its data into $_FILES. why not submit the base64 data and regularly decode it in PHP?
Was This Post Helpful? 1
  • +
  • -

#3 Foobarer   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 269
  • Joined: 28-March 17

Re: Convert base64 blob data to PHP $_FILES data

Posted 11 April 2018 - 12:35 AM

To be honest, because I don't know how - What would be the correct way to do that?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4244
  • View blog
  • Posts: 13,449
  • Joined: 08-June 10

Re: Convert base64 blob data to PHP $_FILES data

Posted 11 April 2018 - 12:53 AM

to do what?
Was This Post Helpful? 1
  • +
  • -

#5 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2429
  • View blog
  • Posts: 7,424
  • Joined: 15-January 14

Re: Convert base64 blob data to PHP $_FILES data

Posted 11 April 2018 - 11:19 AM

That data will be in $_POST, so you can access it there.
Was This Post Helpful? 1
  • +
  • -

#6 Foobarer   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 269
  • Joined: 28-March 17

Re: Convert base64 blob data to PHP $_FILES data

Posted 11 April 2018 - 11:56 AM

I can't figure out where the blob itself is when I post it.
I send the formData, but how to get the image from that in the PHP file?

$_POST[<what goes here?>].
When I post stuff as JSON, for example {data: stuff} I know I can do $_POST['data'], but here I don't know how to get the image from the ajax post

This post has been edited by Foobarer: 11 April 2018 - 11:57 AM

Was This Post Helpful? 0
  • +
  • -

#7 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2429
  • View blog
  • Posts: 7,424
  • Joined: 15-January 14

Re: Convert base64 blob data to PHP $_FILES data

Posted 11 April 2018 - 03:28 PM

You gave it a name right here:

formData.append("image[]", blob);


Frankly though I don't know if doing that is going to cause it to be called "image" or "image[]", but you can use print_r to print the entire post array and look at it:

print_r($_POST);

Was This Post Helpful? 1
  • +
  • -

#8 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4244
  • View blog
  • Posts: 13,449
  • Joined: 08-June 10

Re: Convert base64 blob data to PHP $_FILES data

Posted 12 April 2018 - 12:09 AM

Quote

Frankly though I don't know if doing that is going to cause it to be called "image" or "image[]"

it's image.

Quote

When I post stuff as JSON, for example {data: stuff} I know I can do $_POST['data']

That's not correct. you don't post JSON, you pass a JS object to jQuery, which then converts it to form-encoded data. If you were to post actual JSON (not form-encoded), you'd need to fetch it from the PHP input stream, as $_POST requires form-encoded data to be populated.
Was This Post Helpful? 1
  • +
  • -

#9 Foobarer   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 269
  • Joined: 28-March 17

Re: Convert base64 blob data to PHP $_FILES data

Posted 12 April 2018 - 02:03 AM

Thanks!

But from some reason when I fetch data back from the PHP to the ajax call and alert it, I get "Undefined index: image"
I think it's an array perhaps but I still can't find out why it's not defined

Btw, this is the fiddle I'm trying to use:
Client Side Image Upload

This post has been edited by Foobarer: 12 April 2018 - 02:05 AM

Was This Post Helpful? 0
  • +
  • -

#10 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4244
  • View blog
  • Posts: 13,449
  • Joined: 08-June 10

Re: Convert base64 blob data to PHP $_FILES data

Posted 12 April 2018 - 02:10 AM

You renamed the field (without telling us), so obviously it would produce that error.
Was This Post Helpful? 1
  • +
  • -

#11 Foobarer   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 269
  • Joined: 28-March 17

Re: Convert base64 blob data to PHP $_FILES data

Posted 12 April 2018 - 02:17 AM

I know, but I get the undefined index error also with the original name "cropped_image", I just changed it in another test which failed also

Edit: This is how I try to fetch it, but get undefined error:

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $test = $_POST['cropped_image'];


**And I also added the missing "enctype="multipart/form-data" to the form

This post has been edited by Foobarer: 12 April 2018 - 02:27 AM

Was This Post Helpful? 0
  • +
  • -

#12 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4244
  • View blog
  • Posts: 13,449
  • Joined: 08-June 10

Re: Convert base64 blob data to PHP $_FILES data

Posted 12 April 2018 - 02:38 AM

check your dev tools (network tab) what you actually send to PHP.
Was This Post Helpful? 1
  • +
  • -

#13 Foobarer   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 269
  • Joined: 28-March 17

Re: Convert base64 blob data to PHP $_FILES data

Posted 12 April 2018 - 03:44 AM

Do you mean to that:

data:image/png;charset=utf-8;base64,
// Some really really really long string here





I guess I have to remove that charset=utf-8 and the base64 string then?

**Edit: In another script I already removed the base64 and it also didn't work
I just found out this script won't support pinch crop (mobile devices) , so I will probably have to abandon it

This post has been edited by Foobarer: 12 April 2018 - 03:49 AM

Was This Post Helpful? 0
  • +
  • -

#14 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2429
  • View blog
  • Posts: 7,424
  • Joined: 15-January 14

Re: Convert base64 blob data to PHP $_FILES data

Posted 12 April 2018 - 09:58 AM

No, you should not remove that. You should use your developer tools to look at the actual request so you can see the names of everything, and use print_r with $_POST if you want to see what was populated by PHP.
Was This Post Helpful? 1
  • +
  • -

#15 Foobarer   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 269
  • Joined: 28-March 17

Re: Convert base64 blob data to PHP $_FILES data

Posted 12 April 2018 - 10:45 PM

There is nothing from some reason (Or at least that I do not see)
:dangole:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1