Jquery - CodeIgniter How to give file extension to a blob

Question

I have this situation where I'm sending an image blob via ajax to CI controller, which uploads it. The data is sent perfectly, but only when server tries to upload the file, it fails. I noticed it expects a file type with extension. Since its not provided, it fails. CI profiler shows the posted file as this:

Array
(
[name] => blob
[type] => image/png
[tmp_name] => D:xampptmpphpC5EA.tmp
[error] => 0
[size] => 634208
)

while it should be like this:

Array
(
[name] => featured.jpg
[type] => image/jpeg
[tmp_name] => D:xampptmpphpABDE.tmp
[error] => 0
[size] => 634208
)

I suspect this is where it fails. Here is my upload function code:

public function upload__image($path, $image){
    $this->output->enable_profiler(TRUE);
    $config['upload_path'] = "./assets/images/$path";
    $config['allowed_types'] = 'png|jpeg|jpg|gif';
    $config['remove_spaces'] = TRUE;
    $config['file_name'] = parent::getGUID();
    $this->load->library('upload', $config);
    $this->upload->initialize($config);

    if (!$this->upload->do_upload("$image"))
    {
        $msg = $this->upload->display_errors('', '');
        return false;
    }
    else
    {
        $data = $this->upload->data();
        return $data['file_name'];
    }
}

any help will be appreciated. Thank you so much. Should the fix be done on client side with Jquery or on server side? Kindly recommend optimal method as well.

UPDATE

$('#saveme').click(function() {
$croppMe.cropper('getCroppedCanvas').toBlob(function (blob) {
var formData = new FormData();
var tid = $('#myid').val();
formData.append('croppedImage', blob);
formData.append('tid', tid);
$.ajax('upload.php', {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function (response) {
  if(response.Response == 200)
  {
    console.log("Upload successful"+response.Data);
  }
  else
  {
    console.log("some error occured");
  }
}
});
});

UPDATE 2 My php upload function returns this error, when I set it to display errors:

The filetype you are attempting to upload is not allowed.

Please add the frontend code. Also this might help http://stackoverflow.com/questions/13333378/how-can-javascript-upload-a-blob — martinczerwi, Feb 04 '16 at 11:13
THank you @martinczerwi I'm updating my question with front end code. — Zafar, Feb 04 '16 at 11:17
@martinczerwi I have updated the question with the front end code. The problem is: even if I get to use that, as stated in a stackoverflow answer link you sent, how do I mix it down the blob with this name on server side? — Zafar, Feb 04 '16 at 11:26

score 5 · Accepted Answer · answered Feb 04 '16 at 12:09

5

The method FormData.append has a third parameter that specifies the filename to use for the blob

formData.append('croppedImage', blob, 'featured.jpg');

answered Feb 04 '16 at 12:09

Musa

96,336
17
118
137

Awesome @Musa this really worked. Thank you very much. – Zafar Feb 04 '16 at 12:59
Its works for me as well Thanks, @Zafar you should accept this answer. – Anand Singh May 04 '16 at 07:32

score 0 · Answer 2 · answered Dec 18 '19 at 04:30

0

The method toBlob has a second parameter mimeType. You should add the file type as a seccond parameter as well.

answered Dec 18 '19 at 04:30

Cravciuc Andrei

1
1

Jquery - CodeIgniter How to give file extension to a blob

2 Answers2