My upload form needs to be able to select multiple files, show the upload progress, and show the files uploaded below the upload button, user will be able to delete the upload displayed also. I know there are libraries to execute this, point me in the direction of good ones that i can manipulate the css or provide useful links on how to build from scratch. Thank you
You can hide the file input and trigger the upload with the button or something.
const addFile = () => {
document.getElementById('fileElement').click()
}
<input type="file" id="fileElement" style="display:none">
<button onclick="addFile"></button>
Related
I am using FileBase64 react component for uploading files (images), but I have a problem. When I try to upload the same named image twice in a row the file uploader doesn't even trigger. I also tried to upload an image and then change the name of it and try again and then it worked. So I am guessing that the problem is with the file uploader which is not triggered when you try to upload the same NAMED file more times in a row. I have also the function addImageToBase which is just calling an endpoint to send images to the server. I tried to print something on the first line of that function so I can be sure that the problem is not with the function, and the function wasn't triggered at all, so it is a one hundred percent problem with the file uploader.
<FileBase64
type="file"
name='image'
id="file-upload"
multiple={false}
accept="image/*"
onDone={(e) => { setFieldValue("image", e); addImageToBase(e) }}
/>
I don't think that this code is important, but if it will help, here you go. Can anyone tell me how to fix this problem?
I have a project in which some components, such as dropdowns, are written in React.
In this case, I can't select an item from the dropdown because the DOM doesn't show what's in that dropdown.
<div class="Select__control css-1s2u09g-control"><div class="Select__value-container css-1d8n9bt"><div class="Select__placeholder css-14el2xx-placeholder" id="react-select-6-placeholder">Select...</div><input id="react-select-6-input" tabindex="0" inputmode="none" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" aria-readonly="true" aria-describedby="react-select-6-placeholder" class="css-1hac4vs-dummyInput" value=""></div><div class="Select__indicators css-1wy0on6"><div class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer" aria-hidden="true"><span></span></div></div></div>
How to conduct E2E tests in this case? Can someone explain or share their experience? I did not find information on the Internet. thank you
I looked for this component in the source code, but there are no files with react in the project code, these components are in node_modules, and it is not clear how to access this dropdown
This looks like the react-select control (judging by the classes).
This "hair-trigger" behavior makes it hard to find the options, the list disappears upon any mouse action.
The way I do it is
open the devtools
right-click the select, click inspect to find it in devtools
click the select on the page to open it, repeat a few times to open and close, watch the devtools
an element in devtools appears and disappears when menu is opened and closed. The element has format like this: <div id="react-select-6-listbox">, but the number in the id varies depending on how many selects are used on the page.
We now know the id of the options wrapper, so this is the test code:
cy.get('.Select__control')
.parent() // the top-level of react-select
.click() // open the list
cy.get('[id^="react-select"][id$="listbox"]') // the injected options wrapper
.within(() => {
cy.contains('5 - May').click() // select an option
})
cy.get('.Select__control')
.find('.Select__placeholder')
.should('contain', '5 - May') // verify selected text
If the 5 - May text is unique on the page you can just select it after opening the dropdown, but using .within() on the wrapper is safer.
I am building a fullStack project with react where you can create posts.
I am trying to use input type file to upload a picture, but when I click the choose file button, the pop up window does not appear. Here is the input:
<input type="file" onChange={e => setPhoto(e.currentTarget.files[0])} />
This isn't working. I tried changing onChange for onInput and it is still not working. I also looked around to make sure it wasn't nested inside another element that had e.stopPropagation or e.preventDefault. It is not. I tried placing it in different parts of my code and components and it still isn't working.
Something that I found curious is that, this issue is happening on Chrome. When I checked my localhost on Safari, the window where I can select the file pops up.
I want to show PDFs in my angular application. It should be possible to show multiple pages at once and to search inside the PDF.
I tried angularjs-pdf to do so, but it lacks these features. Is there a angular wrapper for pdf.js that can do this? Or can somebody get me startet on how to implement pdf.js in my angular application without a wrapper?
Assuming this statement:
"I want to show PDFs in my angular application"
Anyone searching for this, could ought to check out ng2-pdf-viewer, for more information on this module, can check this out ng2-pdf-viewer PdfShowcase
Basically, this module could somewhat allow one to display more than one PDF in a single screen.
app.component.ts
// Declare the pdf as an empty array
pdfs = [];
// Assuming requesting PDFs from server through MVC style
getPdfs(){
this.getPdfService.getPdfs().subscribe(response => {
response.body.forEach((value, index) => {
this.pdfs.push({
id: index,
obj: window.URL.createObjectURL(value);
});
});
});
}
app.component.html
<div *ngFor="let pdf of pdfs, index as i;">
<div *ngIf="pdf[i]">
<pdf-viewer
[rotation]="0"
[original-size]="true"
[show-all]="true"
[fit-to-page]="true"
[zoom]="0"
[zoom-scale]="'page-width'"
[stick-to-page]="true"
[render-text]="false"
[external-link-target]="'blank'"
[autoresize]="true"
[show-borders]="true"
[src]="pdf.obj"
(after-load-complete)="onPdfComplete($event)"
(error)="onPdfError($event)"
style="width: 100%; height: 800px;">
</pdf-viewer>
</div>
</div>
If this library is not suitable for your use case, you may try with other libraries which uses iframe or similar strategy. Refer here is a useful source worth checking it out.
I know I'm a little bit late for this post but thought of posting here might help some folks who is looking for the same thing. Hope it helps.
From ng2-pdf viewer page, it recommends your desire "angular wrapper for pdf.js", There are a ton of built in functionality Mozilla's viewer supports; such as print, download, bookmark, fullscreen, open file, zoom, search,......
If you need to display multiple PDF files simultaneously and if you don't mind using iFrames, I recommend ng2-pdfjs-viewer. https://www.npmjs.com/package/ng2-pdfjs-viewer
I have to upload an excel file in the application.For that, I need to click on one arrow mark (i.e;browse button)which will open up the popup for the user to choose the file from local drives.Below is the code displayed when I did inspect element on the arrow mark.
" ".
Also, the path which will display after choosing the file will be greyed out before user selects the file. This will be enabled only when the user chooses some file from the local.
I was trying below code but it did not work. I think send keys is wrong option as the text path is greyed out.
Help me on this.
WebElement El = driver.findElement(By.id("'uploadInp'"));
driver.findElement(By.id("uploadInp")).click();
El.sendKeys("D:\\NTN 4\\Demo\\BulkCart_Template.xlsx");
Arrow HTML code:-
<input id="file1" type="file" value="" style="background-color: red;opacity:0;filter:alpha(opacity=0);cursor: pointer; padding-top:3px;width:25px;" name="file">
You do not need to click on browser button or open any pop-up. sendkeys will going to dump your path in HTML DOM for you
So don't click on browser button while use the same button element to perform sendkeys like below:-
WebElement El = driver.findElement(By.id("'uploadInp'"));
El.sendKeys("D:\\NTN 4\\Demo\\BulkCart_Template.xlsx");
Now you need to click on element which is going to start your upload. As you didn't mention and it's unclear according to your question that which element going to upload your file. Just find that element and click on it normally.
Hope it will help you :)