3

I have a form with a couple of input fields and two file inputs(image upload). The basic requirement was working fine until I have tried to integrated image drag/upload and crop feature for one of the file input field.

The UI flow is like, for one of the images uploads, I have to open a popup, drag or drop image there, crop it and use that image for uploading.

I have successfully dragged/dropped image and crop it also. After cropping using jquery cropper library I have a base64 version of the image and a blob version of the same. What I need is to accommodate this image together with the existing form in the place of the corresponding image and the form submission code won't fail because of this integration.

Awaits help.

I will show a sample form to get the scenario clear.

//working form

<form method="post" enctype...>
    <input>
    <input>
    <!--<input type="file" name="image1">--> //image image should be uploaded and cropped from a modal, so I have changed this to as below
    <button>Upload Image</button> // when click on this a popup will appear and there I crop the uplaoded image separetly
    <input type="file" name="image2">
    <button>Save</button>
</form>

//Popup
javascript

 var canvas = $imageCropper.cropper('getCroppedCanvas', canvasOptions);                                
 // get cropped image data
 var ImageURL = canvas.toDataURL('image/jpeg', quality);
 // transform it to Blob object
 var compressedFile = dataURItoBlob(dataUrl);

So I need to provide image value to this file upload element inorder to work the form submit feature as before.

Advance thanks for helping.

Soojoo
  • 2,146
  • 1
  • 30
  • 56
  • 1
    Possible duplicate? -> https://stackoverflow.com/questions/13076954/how-do-you-submit-a-javascript-generated-bitmap-image-via-post – daddygames Jan 11 '18 at 21:14
  • 1
    @daddygames It seems to be a pretty different issue. – JakeParis Jan 11 '18 at 21:18
  • Possible duplicate of [How do you submit a Javascript generated bitmap image via POST?](https://stackoverflow.com/questions/13076954/how-do-you-submit-a-javascript-generated-bitmap-image-via-post) – J E Carter II Jan 11 '18 at 21:19
  • @JakeParis there's a JavaScript bitmap and they want to post it. There's more to it than just pushing the image in this question, but basically, just add the form data to the ajax request with the bitmap for the post and that's it. What am I missing? – daddygames Jan 11 '18 at 21:22
  • @all, before posting this here I have gone through several solutions and similar unrelated links like above folks posted. I should be able to submit the form as like a form with file inputs and in the there shouldn't be any back end server code change because of this. Please understand the situation here. – Soojoo Jan 11 '18 at 21:23
  • @daddygames will your suggested solution have the same back end code for getting the post request and save both images, image1 and image2 ?? – Soojoo Jan 11 '18 at 21:32
  • There shouldn't be any need for backend changes, but I'm not 100% confident in how the file you've created will be treated by the back-end. When you make the AJAX request, just name the parameters the same way the back-end would expect to see from a form submission. Then as long as the data types match up on the back-end, it will work. – daddygames Jan 11 '18 at 21:37
  • @daddygames 100% sure about back-end code change since we are POST image as a direct string value instead of multipart/form-data. that's why the question has the difference from what you thought to be. – Soojoo Jan 11 '18 at 21:57

0 Answers0