What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Submitting "new FormData()" via ajax

    Asked by emilevdende on October 07, 2014 at 05:16 AM

    Hi,

    Me and my developer are working on a solution to incorporate client-side image resizing/compression in a form (form is used on an iPad).

    We want to use client-side image resizing and compression, because we have limited bandwidth available. We have created an html5 / javascript / canvas solution which resizes the image we want to submit. But we cannot apply the image data to an existing form input field of type file.

    So our idea was to use the new FormData approach and add the blob (resized file) to the object and remove the original file (with the full image), so that the resized image is submitted instead.

    We tried to submit the form via ajax to the action url of the form. But we encountered an Access-Control-Allow-Origin error. This prevents us from submitting the form this way. 

    We would like to know:

    - if the approach described above is possible

    - if we can submit the "new FormData" over ajax

    - if there are any hooks available to do so, because we still want to use the Jotform validations.

     

    Thanks in advance, if there is anything unclear, please let me know.

     

    Cheers,

    Emile

    JotForm style size ipad
  • Profile Image
    JotForm Support

    Answered by Welvin on October 07, 2014 at 09:18 AM

    Hi Emile,

    I'm not sure if the workaround would work inside Jotform. I'm submitting this to our backend term for further assistance. I guess there's a limit or something the like that is preventing the script from working to the form. Our developers should be able to help you on this matter.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by widgets on October 07, 2014 at 09:48 AM

    Hi @emilevdende, I have a question are you creating a widget for your form?

    - if the approach described above is possible

    yes of course but I since you're using the power of HTML 5 FileReader why not just send its raw content to your server directly instead? FileReader can turn your image to a base64 encoded string which you can pass through the HTTP request. By reaching the php(if you're using it as the backend) you can just decode the string and get the real image.

    - if we can submit the "new FormData" over ajax

    if you're requesting or sending a http request from different server/domains it will most likely show you an error about Access-Control-Allow-OriginIt is enabled by most browser for security reasons.

    I personally solved the Access-Control-Allow-Origin error by adding this php code in top of the script endpoint:

    <?php header('Access-Control-Allow-Origin: *'); ?>

    * is a symbol for wildcards which allows every domains to access your endpoint. if you want to allow only specific request from certain domain list or trusted domains (and protocols) do the following:

     <?php header('Access-Control-Allow-Origin: http://example.com'); ?>

    If you have the time please visit and read the following articles, it will definitely help you reach your goals.

    http://hayageek.com/cross-domain-ajax-request-jquery/
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

    If you have further questions please let us know.

    Thanks

  • Profile Image

    Answered by emilevdende on October 09, 2014 at 04:20 AM

    Hi!

    Thanks for your reply.

    I did forget to say that we would like to keep submitting all the data to Jotform, including the manipulated (resized) image. So setting the PHP header is not possible in this setup, at least not on our side.

    Again, we would like to submit all data through ajax (or some other if applicable) to Jotform. Is that possible?

    Thanks!

    Emile

  • Profile Image
    JotForm Support

    Answered by widgets on October 09, 2014 at 05:38 AM

    @emilevdende - it wasn't really clear on what you are trying to achieve so I thought you're developing a widget or something. So now you want to send a data to your form is that correct? How about checking the JotForm API instead? It might give you some answers regarding sending data to JotForm.

    Thanks

  • Profile Image

    Answered by emilevdende on October 09, 2014 at 06:10 AM

    Hi,

     

    Let me try to explain the total process:

    1. We use Jotform to create a form with basic questions and a file upload

    2. The form is hosted on our own server using the embedable source from Jotform

    3. The form entries are being sent to Jotform (it works like that out of the box)

    4. For post processing of the data, we pull in the submitted form data (see 3) using Webhooks into our own database

     

    - Our users use the form on an iPad (which makes the file upload element a 'take picture/upload from album' feature)

    - So, when data from this form is submitted, it first goes to Jotform (which is how it works by default). From there, all data (including) is sent to our database using Webhooks.

     

    Since the iPad takes huge pictures, way too big and high detail for our purpose (1 - 2 MB), we'd like to resize/compress the image client-side. If we wouldn't do this, it would take ages to submit a form. 

    Again, this resizing process is done on the client side, using JS before the submission is done.

    We are trying to achieve this, making sure that the process as described above does not need to change. So submissions still get sent to Jotform, before it ends up in our database. That's why we are trying to send the manipulated image (resized) together with the form data to Jotform. Via ajax, or other method if available.

    The result is quick submission, limited bandwidth needed, less storage needed.

    Hope it's clear now :)

     

    Do you see a solution with the JotForm API?

    Thanks!

    Emile

     

     

  • Profile Image
    JotForm Support

    Answered by widgets on October 09, 2014 at 10:50 AM

    @emilevdende - with that information. Then you're trying to create a to resize the size of the images before it uploads to the form. isn't? If so, then this is most-likely what we called widget.

    With the use of widgets you can communicate with JotForm forms and your created widget with no problem, embedded or not. If you really are into developing a certain tool to resize the image uploaded before it sends to the form then yes widget is a good solution.

    Visit the developer page http://developers.jotform.com/widgets for more information about widgets and how you can integrate it to your form. Unfortunately we don't have a widget that does something like that. So you can either share that in the future or ask a request to create that certain widget for you. Though that will take so much time for sure.

     

  • Profile Image
    JotForm Support

    Answered by liyam on October 09, 2014 at 02:17 PM

    Hello Emile,

    Since what you're trying to do is to process the image on the front-end, you will need to create a widget for this.  Just in case you're already working on it, can you share with us the widget you're working on so we can check and assist you further?

    It would also be great if you can share with us the URL where your form is embedded so we can have a look.  This way we can understand further what's causing this error.

    Thanks.

  • Profile Image

    Answered by emilevdende on November 10, 2014 at 03:51 PM

    Hi,

     

    Brief description of the situation:

    As you know, we are using Jotform for many form solutions presented on iPad. We handle these using the HTML embed code (copy/paste in HTML).

    When a filled in form is submitted, all data is stored in Jotforms back-end. We also configured Webhooks to make sure all data is then passed on to our own back-end. Works perfectly.

    Our forms all have a File upload component (input type=file) and are used on iPads. (Safari forces the file inputs to bring up the camera).

    Photo's taken with the iPad are huge in size. To save bandwidth, we are trying to apply client-side image resizing/compression (using html5/canvas/js solution).

    Solution itself works fine, incorporating this solution into a Jotform is quite a challenge :)

     

    In order to create this custom solution, we have decided not to create a widget for this purpose. We decided to submit the manipulated image (blob) to our own back-end directly. This seems like the most logical, independent and stable solution (no workarounds).

    So in short, the image which is gathered inside the form (with the input type=file) will be sent to our back-end straight away, not via Jotform.

     

    Now our question:

    In order to match the image, sent to our back-end directly, with the submitted data that comes in from Jotform via Webhooks, we would like to use the Jotform submission ID and retrieve this when the submission is done. Is this possible?

    Via this way, we can retrieve the submitted data and update this on the client side.

     

    Thanks in advance, please let me know if there is anything unclear.

     

    Cheers,

    Emile

  • Profile Image
    JotForm Support

    Answered by Kiran on November 10, 2014 at 05:15 PM

    Hello Emile,

    Your message has reached our back-end team. Please allow us some time to get back to you on this.

    Thank you for your patience.

  • Profile Image
    JotForm Support

    Answered by liyam on November 10, 2014 at 08:29 PM

    Thanks for the clear details, Emile.

    Yes, with web hooks, you can capture the submission ID by getting the array key 'submissionID'. So if you're using PHP, you can do it like this $_REQUEST['submissionID'];

    Note: All data that is submitted through the form is then passed to the webhook URL in array format. So if in case you need gather more details of the submission you're receiving, you may also get the following data:

    [formID] - the numeric ID of the form
    [formTitle] - the title of the form
    [webhookURL] - the URL of the webhook used in the form
    [rawRequest] - the json encoded submitted data (example data: {"q1_fullName1":{"first":"John","last":"Doe"},"q3_email3":"liyam@email.com"} )
    [pretty] - the clean formatted submtted data with the form labels matched by the submtted data separated by comma (example data: Full Name:John Doe, E-mail:liyam@email.com)
    [username] - the username of the owner of the form

    Please let us know if you have more questions.

    Thanks.

  • Profile Image

    Answered by emilevdende on November 25, 2014 at 04:42 AM

    Hello Liyam,

    Requesting the submission ID via webhooks is too late in the process.

    We are sending the image (on the front end) to our own back-end. So, while the form is submitted to Jotform, we submit the image to our back-end in a parallel process.

    To be able to match this uploaded image in our back-end to the submission data, we need some sort of identifier (ideally the submission ID) so that when the submission data is requested by our back-end via webhooks, we know to which image this submission data belongs.

    So in short, we should have the submission ID sooner in the process, at the point of submitting the data (submitting the form).

    Can you tell me how to do that?

    Thanks!

    Emile

  • Profile Image
    JotForm Support

    Answered by liyam on November 25, 2014 at 05:25 AM

    Hello Emile,

    Unfortunately that won't be possible. The submission ID only gets generated when the submission is received by JotForm's servers.

    An alternative that I could think of is adding a unique ID widget on your form and set your counter and use that instead.  That way, upon loading of the form, you'll be able to get an ID value which you can use as replacement to the submission ID and you can get the value of the unique ID before it gets submitted to JotForm

  • Profile Image

    Answered by emilevdende on November 25, 2014 at 05:29 AM

    Ah, that's a bummer!

     

    The downside of using the unique ID widget is that form admins can (not necessarily they will) change this value which could inflict a duplicate ID situation...

    Is there maybe a widget (or a way) to get a randomly ID generated without the possibility to edit it?

     

    Cheers,

    Emile

  • Profile Image
    JotForm Support

    Answered by Welvin on November 25, 2014 at 08:19 AM

    Hi Emile,

    We have this widget: http://widgets.jotform.com/widget/random_value_generator. Random result and not editable. Give it a try and let us know your feedback.

    Thanks