I need help in submitting a video file using AngularJS (in an Ionic App) to a PHP server. The code works for images but not videos. A quick hint, I think the name of the file is been sent to the server but when I tried getting the size it shows 0, which means the actual file wasn't sent.
Index.php
<div class="list">
<label>Video clip (for peculiar cases)</label>
<label class="item item-input item-stacked-label">
<input type="file" ng-model="image34" name="image34" id="image34" placeholder="" onchange="angular.element(this).scope().uploadedFile34(this)" valid-file >
</label>
on select the uploadedFile34 function is triggered. see the code below
$scope.uploadedFile34=function(element)
{
$scope.currentFile34= element.files[0];
var reader = new FileReader();
reader.onload = function(event){
$scope.image_source = event.target.result
$scope.$apply(function($scope){
$scope.files34 = element.files;
});
}
reader.readAsDataURL(element.files[0]);
on submitting the form I get the file this way
$scope.image34=$scope.files34[0];
formData.append("image34", $scope.image34);
Using form data which works perfectly for images but not for videos. Please I really need help on this, all efforts to get this done has not helped. Still getting my head round angularjs.
Related
My website allows users to upload images. The upload functionality works perfectly, as long as there is a file to choose. However, when I access my website on my iPhone, and try to upload a photo, I'm given choices of choosing a file, or taking a photo with the iPhone camera. When I choose the option of taking a photo, my website crashes. Can someone help me with this?
Here's the input code:
<input id="uploadStatus" type="file" name="photo" accept="image/*" onchange="loadFileStatus(event)" hidden>
And here's the javascript code:
reader.onload = function(){
var output = document.getElementById('outputstatus');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
}; ```
Thank you in advance.
I've a form which contains following file upload control and image control:
<form action="rebate_preview.php" role="form" method="post" enctype="multipart/form-data">
<input type="hidden" name="hidden_path" id="hidden_path" value="">
<input type="file" name="rebate_image" id="rebate_image">
<img id="rebate_old_image" src="#" alt="your image" width="80" height="80"/>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Here I'm enabling the user to see the preview of the image he selected for upload without actually uploading the image to server using following jQuery code :
$(document).ready(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#rebate_old_image').attr('src', e.target.result);
$('#hidden_path').val(e.target.result)
}
reader.readAsDataURL(input.files[0]);
}
}
$("#rebate_image").change(function(){
readURL(this);
});
});
Now the problems I'm facing is I'm not able to show the same image preview on the next page i.e. on a file "rebate_preview.php" after form submission using image control. The next issue I'm facing is how should I store the values from array $_FILES on the page rebate_preview.php?
Remember still the image uploaded by user is not yet uploaded to the server.
The page rebate_preview.php is just a preview page with some other fields to preview the details.
How should I show this image on the page rebate_preview.php using image control and how should I store the $_FILES array data?
I had this problem a short while back when I was building an application, the best thing to create an OBJECT URL from the selected image when you select the file, you can then set your img src to that OBJECT URL data, which will render it to the page, for example lets say you have a file input with the id image_file. you could do this:
// Preview the image on the page
$('#image_file').change(function(e) {
var selected_file = $('#image_file').get(0).files[0];
selected_file = window.URL.createObjectURL(selected_file);
$('#preview_image').attr('src' , selected_file);
});
The source is now the BLOB representation of the image, you can then submit your form to upload the image or select another image to update the preview, hope this helps :)
Simple Solution?
in PHP script just do:
print "<img src='".$_POST['hidden_path']."'>";
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.
The below coding in Javascript for uploading image and preview works fine in chrome but not working in IE8. I tried the whole day, but I cant solve this. Anyone can help me to solve this issue. Thanks in advance
<form name="addpoll" action="" method="post" id="addpoll" enctype="multipart/form-data" class="polladdform" onsubmit="return validation();">
<input type="button" onclick="HandFileButtonClick();" value="Browse" id="firstremove" style="margin-top: 30px;" class="addmultiple">
<input type=file name="choiceimg1" id="chimg1" value ="Select" onchange="readURL(this)" style="display:none;">
<img src="#" name="viewimg1" class="addmultiple" id="viewimg1" height="70px" width="85px" style="display:none"/>
<script>
function HandFileButtonClick()
{
document.addpoll.choiceimg1.click();
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var ss=$(input).attr('name');
var n=ss.split("choiceimg");
reader.onload = function (e) {
$('#viewimg'+n[1]).css({'display':'block','margin-left':'332px','margin-top':'-88px'});
$('#viewimg'+n[1]).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
Microsoft provided an object to handle file, FileSystemObject, doc is here.
It does can get file content correctly, but there're two limitations that make it useless in most situation:
"Initialize and script ActiveX controls not marked as safe" must be "Enable";
"Include local directory path when uploading files to a server" must be "Enable".
Those two options are in IE's security setting, I don't think user will make them as "Enable" in normal situation.