I'm creating a feedback form, where the user can record their screen about an error or idea.
I made this using getDisplayMedia and mediarecorder which is then saved into a webm blob url.
Initially, we gave the user a download file of that recording and the user had to manually put it into file input, but I was wondering if it's possible to fetch that video from the blob url and submit along the form without user having to download the file or does this pose a security issue?
This has to work only on Mozilla and Chrome and if there's vanilla JS solution to this, it would be appreciated.
So, right now I have a working blob uri that is passed to the form as url parameter and now i need to get that blob video and attach it to the form so I can send it as an attachment in an email
(value $(Q:attachment) is the uri parameter that gets passed)
var blob = new Blob(recordedChunks, {
type: 'video/webm'
});
var attachment = URL.createObjectURL(blob);
<form name="feedbackform" action="/submit" method="post" enctype="multipart/form-data">
<input type="hidden" name="video_attachment_url" id="video_attachment_url" value="$(Q:attachment)">
<input type="submit" value="Send">
<input type="button" value="Cancel" onClick="window.close();">
</form>
Related
Can I save the form data as a .txt file or .json file on my system using Fetch API in JavaScript.
I dont want the form data to be saved in some PHP file
<div>
<form>
Name:<br>
<input type="text" id="fname" name="firstname"><br><br>
Phone No:<br>
<input type="text" id="ph" name="lastname"><br><br>
Designation:<br>
<input type="text" id="des" name="designation"><br><br><br><br>
<input type="button" value="Update" onclick="getdata()"</button>
<button name="cancel">Cancel</button>
</form>
</div>
<script>
function getdata(){
var name = document.getElementById('fname').value;
var ph = document.getElementById('ph').value;
var des = document.getElementById('des').value;
alert(name);
}
</script>
No, you can not, FetchAPI is HTTP client and you need server to receive your HTTP request you sent with Fetch and save data from that request to file. It can be HTTP server written in any language: php, node, c#, etc.
You can, however, prompt user to download text file you generated via JS in browser. If it is what you need, you'll need to refer to FileReader API and/or change your question
I'm programming a PHP function that encrypts a file using a specific key. I want the user to upload his file using the "browse..." window then get the "save as" window as a result after the php encrypting.
I'm working in full AJAX so my upload method uses a hidden form and a hidden iframe to handle the upload request.
Javascript Part :
<script>
$("#encryptFileButton").button().click(clickEncryptFile);
function clickEncryptFile() {
if (!jQuery.browser.msie) {
$("#encryptFileBrowse").click();
} else {... not the matter of the question ...}
}
function encryptFileBrowseChange() {
$("#uploadAttachmentForm").submit();
}
</script>
The nice visible button
<button id="encryptFileButton" type="button" class="ui-..." role="button">Encrypt Now</button>
The hidden part
<form action="https://web.com/encryptPHP" id="uploadAttachmentForm" target="uploadTarget" style="display:none" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<input type="file" name="encryptFileBrowse" id="encryptFileBrowse" onchange="encryptFileBrowseChange()">
</form>
<iframe id="uploadTarget" name="uploadTarget" src=""></iframe>
Now on the server side, the encryptPHP does the job and returns the encrypted file with all the required HTTP headers. But the browser does not open the "save as window"
Here is the Chrome inspector of the request
Can you help me to fill the download part of this problem ?
I wouldn't like using a temporary file on the server to be stateless and prevent orphan files when browser is interrupted. I'd really like to make this with only one query.
In the server response, Content-disposition is inline, it must be content-disposition: attachment to get the "save as " popup.
I don't delete my question as the code example is pretty and usefull.
Uploading and downloading in only one request is nice.
I am implementing the dropzone.js file upload. However I do not want dropzone to handle the uploads because it seems like they go in bursts instead of all at once. I would like my photos to be uploaded at one time. To do so users will drag and drop photos into the dropzone area. From here they choose some custom options on the images. Then I would like a user to hit a custom button. This button can perform the following.
Add photos to multiImg[] array
invoke form
After a photo is uplaoded into the dropzone I will have access to all the information about the photo. Name, size, location(on uers computer). I am just unsure how to accomplish step 1 which is to take the photos and pass them into a form via javascript.
Is this even a good approach?
<form method="post" action="" enctype="multipart/form-data">
<input type="file" accept='image/*' name="multiImg[]" id="multiImg" />
Or possibly programatically appending
<input type="file" accept='image/*' name="Img" id="Img" />
Tags to the form and then submitting the form when done would be acceptable as well.
Can you dynamically add to the FileList for an input?
This got me closer to a solution.
xhr = new XMLHttpRequest();
formData = new FormData();
formData.append("" + paramNm + (this.uploadMult ? "[]" : ""), file, fileName);
xhr.send(formData);
I'm looking to write a test to upload a file using Fluentlenium and DropZone.js (http://www.dropzonejs.com/). Dropzone.js works in a modal and then you can drag and drop or upload the normal way.
As soon as you click to upload the test crashes because your no longer in the browser.
I've found many posts getting this to work in Selenium using things like:
WebElement fileInput = driver.findElement(By.xpath("//input[#type='file']"));
fileInput.sendKeys("C:/path/to/file.jpg");
I however cannot sendKeys to anything because their isn't even an input type="file" when using DropZone.js.
The only input types I'm seeing are all type hidden.
<input type="hidden" name="key" value="temp/${filename}">
<input type="hidden" name="AWSAccessKeyId" value="secret">
<input type="hidden" name="acl" value="private">
<input type="hidden" name="success_action_redirect" value="">
<input type="hidden" name="policy" value="secret=">
<input type="hidden" name="signature" value="secret">
<input type="hidden" name="Content-Type" value="application">
We're also using Amazon Web Server to upload the documents too, it seems like everything is working off the below script:
<script id="hiddenKeyPairs" type="text/javascript">
var hiddenKeyPairs = {
key: 'temp/${filename}',
AWSAccessKeyId: 'secret',
acl: 'private',
"success_action_redirect": '',
policy: 'secret',
signature: 'secret/secret',
"Content-Type": 'application'
};
var formAction = 'https://secret.com/';
</script>
Which is located on my page.
I'm not seeing anything helpful on https://github.com/FluentLenium/FluentLenium#driver for this.
Do I need to somehow send the file to the key hash in the above script?
Any thoughts?
I'm not sure about the AWS part but I've a similar question about file upload (Programmatically upload / add file via Dropzone e.g. by Selenium), and some potential solutions. I feel they are not very robust, but basically:
Approach 1: Use Java Robot to simulate the GUI actions -
// this opens the file browser window
driver.findElement(By.id("uploadDropzone")).click();
// put the file path in clipboard, paste (C-V) to the window, enter.
StringSelection ss = new StringSelection("some file path");
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(ss, null);
Robot robot = new Robot();
Thread.sleep(2000);
robot.keyPress(KeyEvent.VK_CONTROL);
robot.keyPress(KeyEvent.VK_V);
robot.keyRelease(KeyEvent.VK_V);
robot.keyRelease(KeyEvent.VK_CONTROL);
Thread.sleep(5000); // need some wait for GUI action to work...
robot.keyPress(KeyEvent.VK_ENTER);
robot.keyRelease(KeyEvent.VK_ENTER)
Approach 2: Do all in code (hacky...) - yes there is a file input element, but only defined in Dropzone.js itself, which can be selected with $(".dz-hidden-input"). But you also have to make it visible (as Selenium can only act on visible elements), then can call sendKeys on it. And after that, again in Javascript, retrieve the File object from that element, then pass to addFile(file) on the Dropzone object.
I have a page file-upload.jsp with the code snippet below:
<form action="" id="frmupload" name="frmupload" method="post" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upload_file" multiple="" />
<input type="submit" value="Update" />
</form>
I have 2 questions:
The moment I select some files, i.e the onchange event of the input type file, the file(s) should get uploaded.
I have a Java page that receives multipart request parameter and uploads the file to the said location. My problem is the form submission onchange, so that the Java file can proceed with further operations.
I googled and went through lot of articles. Some say it's not possible to upload files directly via Ajax, some say submit the form to an iframe via Ajax/jQuery.
I tried a lot of code from internet, such as this:
$(document).ready(function(){
$('upload_file').change(function(){
var data = new FormData();
data.append('file', $(this[0].files[0]));
$.ajax({
url: 'photo.jsp',
type: 'post',
contentType: attr('enctype', "multipart/form-data"),
data: data,
success: function(data){
alert(data);
}
})
});
});
but could not get the expected results.
I also need a progress bar for the upload operation.
Look at this example using an IFrame, is in PHP but changing the action should do the trick
Ajax Style File Uploading Using Hidden IFrame
Since you're already using jQuery, I would definitely go for the jQuery Form Plugin, which allows you to do form uploads via AJAX, even if the form contains a file input.
There is an example on its website available that shows how to display a progress bar.
Look at this example it is exact as you want
http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/asyncfileupload/asyncfileupload.aspx