Automatically export file into modal form attachment

JavaScript
1

Hi everyone,

I am still fairly new to coding but I am finding my way around it and really enjoying the learning process so far! I have quite a tricky problem that I am trying to overcome, but I am battling to research this idea as I don’t even know what to search for.

Some quick background info: I have created a Leaflet.Draw map that allows the user to download a drawn feature as a .kml file. When the submit button is clicked, the feature is exported and a contact form (as a modal) pops up which allows the user to provide some info and attach their exported feature (take a look at the screenshot).

JPveH.png947×631 430 KB

I thought it would be really cool if the exported feature was automatically uploaded to the form’s attachment input. Is something like this possible?

Here is the export script:

document.getElementById('export').onclick = function(e) {
        // Extract GeoJson from featureGroup
        var data = featureGroup.toGeoJSON();
        var kml = tokml(data);
        // Convert to dataURL format
        var convertedData = 'application/vnd.google-earth.kml+xml;charset=utf-8,' + encodeURIComponent(kml);

        // Create export
        document.getElementById('export').setAttribute('href', 'data:' + convertedData);
        document.getElementById('export').setAttribute('download','data.kml');
    }

And the attachment part of the form

<input type="file" name="file_attach[]" multiple data-required="true"/>

Does anyone possibly have some advice, or know where I could find some more information regarding this idea? Thanks :sunglasses:

2

Hi @Jonkat323

What you’re trying to do requires the ability to access the file system. I had a quick look and there is an API (although it’s experimental and only supported by chrome) that might be able to do what you want: guide and MDN.

However, you’re probably better off leaving it as is, especially as it looks like that API isn’t going to be supported by other browsers.

3

Hi @joesmith100

Thanks for your response. This API definitely looks interesting and I will read up on it, but I think it might be out of my current skill set. I think you’re right though, maybe it is best to just leave it as is. Having to drag the downloaded file to the form attachment isn’t a serious issue at all

4

Would it be possible to skip exporting the file to the user’s PC, and rather somehow have it cached somewhere. The when the modal form is triggered, the attachment field automatically gets the cashed .kml file?

5

If the contents of the file could be stringyfied and sent to a server for processing then yes. You could just store it in memory and not have an attachment field, then send that to the server.