Folder structure on server:
-JAVA_PROJECT
---------DOWNLOAD_FOLDER
---------src
---------target
-REACT PROJECT
---------Public
---------src
---------node_modules
I have zip file in DOWNLOAD_FOLDER. Onclick of a button on react page i want to download the zip file.
My Code:
var urls = [
"/files/ProductList.zip",
];
var url = urls.pop();
var a = document.createElement("a");
a.setAttribute("href", url);
a.setAttribute("download", "");
a.setAttribute("target", "_blank");
a.click();
I am able to download only the files placed in PUBLIC folder. Is there any wway to traverse location to DOWNLOAD_Folder and download the zip file?
Or shall i fetch zip file content using axios and download file?
Please suggest.
In react application, it display the file in new tab using window.open(blobURL). Following is code snippet:
const fileURL = window.URL.createObjectURL(file);
window.open(fileURL);
The fileURL variable generated url like "blob:http://localhost:3010/9d8996ad-8c96-4d42-ba9c-80a79d0fcd91" and user try to save the file, it stores as the Guid name("9d8996ad-8c96-4d42-ba9c-80a79d0fcd91"). How can we download as "test.pdf".
The file I want to upload is added on attach document field but this pop up is not closing.
My Code is:
var path = require('path');
var fileToUpload = 'C:/Users/r/project photos/11182717-Business-woman--Stock-Photo-lawyer.jpg',
absolutePath = path.resolve(__dirname, fileToUpload); element(by.xpath('html/body/div[1]/div/div/div[2]/div[2]/div/div/form/div/div[1]/div[2]/a/i')).click();
element(by.css('input[type="file"]')).sendKeys(absolutePath);
The solution is not to open the popup (assuming we are talking about the "Choose file" browser popup). Remove this line containing the "click" action:
element(by.xpath('html/body/div[1]/div/div/div[2]/div[2]/div/div/form/div/div[1]/div[2]/a/i')).click();
I am trying to implement jsfiddle example http://jsfiddle.net/danialfarid/s8kc7wg0/112/
of Drag and drop file upload using angular js and
it is working fine until I am using there URL path " 'http://angular-file-upload-cors-srv.appspot.com/upload"
I have used exactly the same code they have provided in the jsfiddle , I have understand that it will upload file in upload folder so i have created a folder name "upload" with 777 permission.
I am facing only issue with Controller url path section so i have given that code below.
$scope.upload = function (files) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.$error) {
Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {
username: $scope.content,
file: file
}
If you run this URL directly on the browser it will show you empty json data "{"size":0}"
I have searched for it in many website but not found any explanation about it.
My Query :
what is the use of this URl
how i can create this in my node js application.
How i can set file upload path
I have also checked there GitHub for details but no help
https://github.com/danialfarid/ng-file-upload
Any help will be appreciated
I want to test file uploading using an angularjs e2e test. How do you do this in e2e tests? I run my test script through grunt karma.
This is how I do it:
var path = require('path');
it('should upload a file', function() {
var fileToUpload = '../some/path/foo.txt',
absolutePath = path.resolve(__dirname, fileToUpload);
element(by.css('input[type="file"]')).sendKeys(absolutePath);
element(by.id('uploadButton')).click();
});
Use the path module to resolve the full path of the file that you want to upload.
Set the path to the input type="file" element.
Click on the upload button.
This will not work on firefox. Protractor will complain because the element is not visible. To upload in firefox you need to make the input visible. This is what I do:
browser.executeAsyncScript(function(callback) {
// You can use any other selector
document.querySelectorAll('#input-file-element')[0]
.style.display = 'inline';
callback();
});
// Now you can upload.
$('input[type="file"]').sendKeys(absolutePath);
$('#uploadButton').click();
You can't directly.
For security reason, you can not simulate a user that is choosing a file on the system within a functional testing suite like ngScenario.
With Protractor, since it is based on WebDriver, it should be possible to use this trick
Q: Does WebDriver support file uploads? A: Yes.
You can't interact with the native OS file browser dialog directly,
but we do some magic so that if you call
WebElement#sendKeys("/path/to/file") on a file upload element, it does
the right thing. Make sure you don't WebElement#click() the file
upload element, or the browser will probably hang.
This works just fine:
$('input[type="file"]').sendKeys("/file/path")
Here is a combo of Andres D and davidb583's advice that would have helped me as I worked through this...
I was trying to get protractor tests executed against the flowjs controls.
// requires an absolute path
var fileToUpload = './testPackages/' + packageName + '/' + fileName;
var absolutePath = path.resolve(__dirname, fileToUpload);
// Find the file input element
var fileElem = element(by.css('input[type="file"]'));
// Need to unhide flowjs's secret file uploader
browser.executeScript(
"arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1",
fileElem.getWebElement());
// Sending the keystrokes will ultimately submit the request. No need to simulate the click
fileElem.sendKeys(absolutePath);
// Not sure how to wait for the upload and response to return first
// I need this since I have a test that looks at the results after upload
// ... there is probably a better way to do this, but I punted
browser.sleep(1000);
var imagePath = 'http://placehold.it/120x120&text=image1';
element(by.id('fileUpload')).sendKeys(imagePath);
This is working for me.
This is what I do to upload file on firefox, this script make the element visible to set the path value:
browser.executeScript("$('input[type=\"file\"]').parent().css('visibility', 'visible').css('height', 1).css('width', 1).css('overflow', 'visible')");
If above solutions don't work, read this
First of all, in order to upload the file there should be an input element that takes the path to the file. Normally, it's immediately next to the 'Upload' button... BUT I've seen this, when the button doesn't have an input around the button which may seem to be confusing. Keep clam, the input has to be on the page! Try look for input element in the DOM, that has something like 'upload', or 'file', just keep in mind it can be anywhere.
When you located it, get it's selector, and type in a path to a file. Remember, it has to be absolute path, that starts from you root directory (/something/like/this for MAC users and C:/some/file in Windows)
await $('input[type="file"]').sendKeys("/file/path")
this may not work, if...
protractor's sendKeys can only type in an input that's visible. Often, the input will be hidden or have 0 pixels size. You can fix that too
let $input = $('input[type="file"]');
await browser.executeScript(
"arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1",
$input.getWebElement()
);
I realized that the file input in the web app I'm testing is only visible in Firefox when it is scrolled into view using JavaScript, so I added scrollIntoView() in Andres D's code to make it work for my app:
browser.executeAsyncScript(function (callback) {
document.querySelectorAll('input')[2]
.style = '';
document.querySelectorAll('input')[2].scrollIntoView();
callback();
});
(I also removed all of the styles for the file input element)
// To upload a file from C:\ Directory
{
var path = require('path');
var dirname = 'C:/';
var fileToUpload = '../filename.txt';
var absolutePath = path.resolve('C:\filename.txt');
var fileElem = ptor.element.all(protractor.By.css('input[type="file"]'));
fileElem.sendKeys(absolutePath);
cb();
};
If you want to select a file without opening the popup below is the answer :
var path = require('path');
var remote = require('../../node_modules/selenium-webdriver/remote');
browser.setFileDetector(new remote.FileDetector());
var fileToUpload = './resume.docx';
var absolutePath = path.resolve(process.cwd() + fileToUpload);
element(by.css('input[type="file"]')).sendKeys(absolutePath);
the current documented solutions would work only if users are loading jQuery. i all different situations users will get an error such:Failed: $ is not defined
i would suggest to document a solution using native angularjs code.
e.g. i would suggest instead of suggesting:
$('input[type="file"]') .....
to suggest:
angular.element(document.querySelector('input[type="file"]')) .....
the latter is more standard, atop of angular and more important not require jquery