My framework is Spring-MVC with AngularJS. For File Upload i am using Multipart File Upload. I created a hidden iFrame to submit file to backend. The code looks like this.
function fnUploadFile(formData){
var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none"></iframe>');
$("body").append(iframe);
var form = $('#uploadform');
form.attr("action", CONTEXT_PATH+"admin/uploadPDF");
form.attr("method", "post");
form.attr("encoding", "multipart/form-data");
form.attr("enctype", "multipart/form-data");
form.attr("target", "postiframe");
form.attr("uploadfile", $('#uploadfile').val());
var input = $('<input type="hidden" name="filename"/>').val(formData);
input.appendTo(form);
form.submit();
}
After that I save the file in server location.I am having problem while uploading file from FireFox browser. Its opening a new pop-up right after we click upload button.
Can someone help resolving this issue?
Found the solution for it by myself. Just added text/plain as header in HttpServletResponse. It resolves my problem.
Related
I'm trying to use content-disposition to force a download of a PDF and set the filename, which isn't working. In the network panel I'm seeing that the headers have been set correctly yet the PDF is opening in the browser instead of downloading, and the file name is incorrect and is just a random bunch of characters. Is there something I'm missing? I've tried in both chrome and Firefox with the same result where both show the correct headers in the network tab but the PDF only renders in the browser.
res.on('end', function() {
const body = Buffer.concat(chunks);
response.setHeader('Content-Length', body.length);
response.setHeader('Content-Type', 'application/pdf');
response.setHeader(
'Content-Disposition',
'attachment; filename="Report.pdf"',
);
response.send(body);
});
I have stored the file in my Firebase storage and I got the download URL as well. How do I initiate download in the browser? Right now it is only opening a new window with the file. Here is what I tried:
downloadFile=(file)=>{
var element=document.createElement('a');
element.style.display= "none";
element.setAttribute('href', file.fileUrl)
element.setAttribute('download', file.filename)
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
}
I have a PDF file stored in a directory within the application (assets/pdf/fileName.pdf). I need to display it on a new tab on a button click from a dialog.
Here is what I have, after looking at various answers:
In *.component.ts:
openPDF() {
this.myService.fetchPDF().subscribe(
res => {
let file = new window.Blob([res], {type: 'application/pdf'});
let fileURL = window.URL.createObjectURL(file);
window.open(fileURL, '_blank');
}
);
}
In *.service.ts:
fetchPDF(): any {
const path = 'assets/pdf/fileName.pdf';
return this.httpClient.get(PathResolver.resolveStatic(path),{responseType : 'blob'});
}
I already tried using responseType : 'arraybuffer', but it didn't work out either.
Here are the threads I have looked at:
How to Display blob (.pdf) in an AngularJS app
Angular 2 download PDF from API and Display it in View
PDF Blob - Pop up window not showing content
Failed to load PDF document - Angular JS - BLOB
I am not sure why are you using httpClient. The outcome that you want could be simply achieved by the following code
In *.service.ts:
fetchPDF(): any {
const path = 'assets/pdf/fileName.pdf'
return path;
}
In *.component.ts:
openPDF() {
window.open(this.myService.fetchPDF(), '_blank');
}
You will either need to use the html embed tag (most likely also using a safe pipe), a PDF viewer (like Google PDF Viewer) or you can open the PDF in a new tab (this is the more common approach I see). It depends on your preference.
I need to upload image and video files to the server in an Angular application using Laravel 5.1 as the back end. All Ajax requests need to go to the Laravel controller first, and we have the code there for how the file gets handled when it gets there. We have previously done normal HTML forms to submit file uploads to the controller, but in this case we need to avoid the page refresh of a form, so I am attempting this in Ajax through Angular.
What information do I need to send to the Laravel controller with Ajax that was being sent to the controller via an HTML form previously?
This is the code in the Laravel controller that handled the file information once it got there. That's what I need to figure out how to send, so I can hopefully reuse this code:
$promotion = Promotion::find($id);
if (Input::hasFile('img_path')){
$path = public_path().'/images/promotion/'.$id.'/';
$file_path = $path.'promotion.png';
$delete = File::delete($file_path);
$file = Input::file('img_path');
$uploadSuccess = $file->move($path, 'promotion.png');
$promotion->img_path = '/images/promotion/'.$id.'/promotion.png';
}
if (Input::hasFile('video_path')){
$path = public_path().'/video/promotion/'.$id.'/';
$file_path = $path.'promotion.mp4';
$delete = File::delete($file_path);
$file = Input::file('video_path');
$uploadSuccess = $file->move($path, 'promotion.mp4');
$promotion->video_path = '/video/promotion/'.$id.'/promotion.mp4';
}
As you can see above, we are converting whatever file we get to a PNG with the file name promotion.png so it's easy to fetch, and we are only accepting .mp4 video format. Because of that, we don't need to worry about checking if the file exists and is it ok to overwrite it. That's why you can see in the code we delete any existing file of that name before saving.
The HTML was just an input with a type of "file:
<input type="file" id="img_path" name="img_path" class="promo-img-path" accept="image/*">
We are using Angular now so I can't just send the above through an HTML form anymore. That's what I need to figure out how to do.
We are two developers just doing our best, so I'm sure there is a better way of doing this. However before I refactor this whole thing, I'm hoping I can use Angular (or jQuery as a last resort) to just send the controller whatever file data Laravel needs in order to make the above code work. The answer may be as simple as "send a PUT to the method in that controller above, but instead of a normal JSON payload, use file info in this format and you can gather that info with..."
I would also appreciate any tips on better ways I can do this in the future.
How to POST FormData Using the $http Service
When using the FormData API to POST files and data, it is important to set the Content-Type header to undefined.
var fd = new FormData()
for (var i in $scope.files) {
fd.append("fileToUpload", $scope.files[i]);
}
var config = {headers: {'Content-Type': undefined}};
var httpPromise = $http.post(url, fd, config);
By default the AngularJS framework uses content type application/json. By setting Content-Type: undefined, the AngularJS framework omits the content type header allowing the XHR API to set the content type. When sending a FormData object, the XHR API sets the content type to multipart/form-data with the proper boundaries and base64 encoding.
For more information, see MDN Web API Reference - XHR Send method
How did you get the file information into $scope.files?
How to enable <input type="file"> to work with ng-model
This directive also enables <input type="file"> to automatically work with the ng-change and ng-form directives.
angular.module("app",[]);
angular.module("app").directive("selectFilesNg", function() {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
})
}
}
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<h1>AngularJS Input `type=file` Demo</h1>
<input type="file" select-files-ng ng-model="fileArray" multiple>
<code><table ng-show="fileArray.length">
<tr><td>Name</td><td>Date</td><td>Size</td><td>Type</td><tr>
<tr ng-repeat="file in fileArray">
<td>{{file.name}}</td>
<td>{{file.lastModified | date : 'MMMdd,yyyy'}}</td>
<td>{{file.size}}</td>
<td>{{file.type}}</td>
</tr>
</table></code>
</body>
RECOMMENDED: POST Binary Files Directly
Posting binary files with multi-part/form-data is inefficient as the base64 encoding adds an extra 33% overhead. If the server API accepts POSTs with binary data, post the file directly.
See How to POST binary files with AngularJS (with DEMO)
I want to upload an image file in protractor. the problem is i can not get "input[type = "file"]" element without clicking on upload button.
when I click upload button, file upload dialogue popup opens.
i have tried
browser.actions().sendKeys(protractor.Key.ESCAPE).perform(); but it does not work.
This is what I am doing:
var image = '../images/image1.png';
var absPathImg = path.resolve(__dirname, image);
element(by.id('uploadImage')).click();
browser.actions().sendKeys(protractor.Key.ESCAPE).perform();
element(by.css('input[type=file]')).sendKeys(absPathImg);
element(by.id('upload')).click();
How can i close that file upload dialogue to upload an image?
Try it like this. I used this for Protractor, but I think it's similar for Selenium.
I also have a problem for Windows File dialog not closing.
This is how I solved that:
element(by.css('elementForOpenDialog')).sendKeys(absPathImg);
Send Keys to the element which will open file dialog, not click on element to open file dialog. Just send to that element absolute path and it will upload without opening dialog.
It's worked for me. Good Luck!
This is an old thread but I'll answer in case anyone else runs to this problem.
I had to solve this same problem today. I was able to work around opening the upload dialog, because I am quite sure it cannot be closed without some external libraries and that would not work in headless mode.
You need to inspect the javascript linked to the upload button's click event and execute some script before sending keys to the file input.
This is individual to each case, but in my case i had to do this (Python):
script = (
"var url = '/Contacting/UploadCsv'; "
"$('#buttonFileUpload').data('url', url);"
)
driver.execute_script(script)
driver.find_element_by_id('buttonFileUpload').send_keys(csv_path)
I picked that script from the JS function linked to the button.
I landed here because I was searching on HOW TO CLOSE AN IMAGE WHEN CLICKED
In case that helps someone.
So what I did.
var Img = Driver.FindElement(XPath.News.YourImg);
Img.Click();
try
{
Img.Click();
Assert.IsFalse(feedImg.Displayed);
}catch(Exception ex)
{
}
This way you can check if the image is closed by trying to click on it again.
Instead of clicking on to ESCAPE, why not simulate the ENTER key press to simulate a person entering the path and pressing the ENTER key to upload the image.
I am doing this in my code and this works perfectly fine.
var path = require('path')
this.fileUploadOne = element(by.css('locator_to_element'));
var fileUpload = 'path_of_file_to_upload'
absolutePath = path.resolve(__dirname,fileUpload);
console.log(absolutePath);
this.fileUploadOne.sendKeys(absolutePath);
browser.actions().sendKeys(protractor.Key.ENTER).perform();
//just for debugging purposes.
browser.sleep(20000);