I have a chat, it is done in REACTJS + nodejs, everything works perfectly, but I want to implement a media library type function, where the person will be able to choose the photos that are available in the system, for example:
I have a page where I upload files, and list them in a table.
On the chat page, where I send messages, when I click the attach file button, the windows window opens normally so that the image can be uploaded and sent.
I would like that when I clicked on this button, a modal would be opened and these images that are available in the system would be listed and that could be selected and sent in the chat.
The modal listing the images in the chat I was able to open it, I just can't get past it, make the selected image sent, I don't know if I would need a callback function or something.
Page where the files are listed:
Chat page with modal open:
I would like that when you click on any image of the modal, it would be sent to the chat.
Part of the code responsible for uploading and sending the file:
const handleChangeMedias = (e) => {
if (!e.target.files) {
return;
}
const selectedMedias = Array.from(e.target.files);
setMedias(selectedMedias); };
<input
multiple
type="file"
id="upload-button"
disabled={loading || recording || ticketStatus !== "open"}
className={classes.uploadInput}
onChange={handleChangeMedias}
/>
<label htmlFor="upload-button">
<IconButton
aria-label="upload"
component="span"
onClick={handleOpenContactModal}
disabled={loading || recording || ticketStatus !== "open"}
>
<AttachFileIcon className={classes.sendMessageIcons} />
</IconButton>
</label>
Thanks id advanced !
I can create the page to upload the files and I can display these files in a modal on the chat page, now I am not able to select and send any of these files to the chat.
Obs: The functionality of uploading and sending files from the computer to the chat works correctly, I can select the file and send.
Related
I'm working on the vuejs application and, I'm receiving the pdf file from node backend which has the eg url https:abc.com/api/filename.pdf.
I'm using it link so
const myUrlVariable='https://someurl.com/dataCollection/imperial'
<a :href="myUrlVariable" target="_blank"></a>
The requirement of this is to when user click on link, file should open in the new tab.
But Right now when I click on the link its considering it as application route and show the message page not found, instead it show the pdf file.
I check this link in the postman and its returning the file as expected.
href should not be a string, but a binding to a variable
Change this
to this
<a :href="myUrlVariable" target="_blank"></a>
👆
Is the url correct?
https:abc... -> https://abc...
I am building a blog web application. I am using nodejs, reactjs and mongodb. I am trying to create a system where an admin can edit the name of their blog, color, header image, sidebar image and content without contacting the developer which is me.
I started off with the blog name. I used input and react useState and created buttons to handle this change of name. By default, the blog name is welcome, but when the user admin clicks on edit mode button, the input box shows-up and the user can write the preferred name there and click on update to update it. That works until I reload the page and the name goes back to the default state which is 'welcome'.
I am thinking, what is the best way to achieve this? Do I use local storage or the name of the site will have to be loaded from server? Or is there a way to get this done so that when you reload the web app, it doesn't return to the default state but maintain the last name that was saved? I am looking at how WordPress user's can edit frontend parameters of their website and save them.
Here are my codes:
const [EditHeaderTitleMode, setEditHeaderTitleMode] = useState(false) //this actives the edit mode
const [writeHeaderTitle, setWriteHeaderTitle] = useState('Welcome') //this is the default name of the site.
return (
<>
<Dashboard setEditHeaderTitleMode={setEditHeaderTitleMode}/>
<div className='header'>
<div className='headerTitles'>
{EditHeaderTitleMode ? <input type="text"
onChange={(e) => setWriteHeaderTitle(e.target.value)}
/>: <span className='headerTitleSm' >{writeHeaderTitle}</span>}
<span className='headerTitleLg'>Tech World</span>
</div>
</div>
</>
)
}
When you refresh or reload your Webpage, your component's state will reset to the default value which is 'Welcome' you setted. To avoid this, Get writeHeaderTitle from your database And Set writeHeaderTitle to the database.
I'm trying to build a website which has some private pages. And my goal is it that the users have the option to download PDFs from there, but only if they're authenticated. Now my question is, where should I store the PDF files, so that it can only be accessed by the authenticated users and how should I serve/access them. And all that with nextjs, if possible (I use next-auth for authentication).
It's a pretty general question and I don't need specific answer for it but a general way which I should follow or thing that I should look into would be awesome.
I'm kinda new to web development, so sorry if the question is dumb.
Authentication
I think you can combine the power of JavaScript and CSS to achieve this.
After authenticating the user with your desired framework, then navigate inside the component that will display login or sign up, and set up react hook state as this:
const [isAuthenticated, setIsAuthenticated] = useState(false);
Now the token generated by the authentication framework must have been saved. Use if else control to join them as this:
const user = Auth.user({email:abc#gmail.com})
let message
if (user){
setIsAuthenticated(true);
Message = <h3>Welcome {user.username}</h3>
}else {
router.push('/')
}
.
.
.
return(
<div className={isAuthenticated ? 'display': ''}>
<button>download link</button>
</div>
)
Inside the global CSS file,
Add the following lines
.display {
display:none;
}
This should do it.
It will only display the DOM to only authenticated users.
I have replaced the "Send" button in the compose dialog with my "Send" button and using "Gmail API" to send the email.
I am able to send the email and get the response.
Now to make it more user-friendly, I want to close the compose dialog after my email is sent (similarly when the Gmail closes the dialog when email is sent). But I am unable to do so.
NOTE: When the email is sent successfully using "Gmail API", I am deleting the draft for that email also.
UPDATE:
Using JQuery, I get the "X" (Close) element in the dialog which is an image-
<img class="Ha" id=":2i" src="images/cleardot.gif" alt="Close" aria-label="Save & Close" data-tooltip-delay="800" data-tooltip="Save & Close">
I want to trigger a click event on it but it is not triggering.
When I tried triggering the click event on the "Discard" button of the same dialog, it worked successfully. Here is the discard button-
<div id=":68" class="oh J-Z-I J-J5-Ji T-I-ax7" tabindex="1" role="button" data-tooltip="Discard draft" aria-label="Discard draft" style="user-select: none;">
How do I click on the img tag?
You can take help of inbox sdk. It works perfectly.
sdk.Compose.registerComposeViewHandler( (composeView) => {
composeView.on('presending', function (event) {
//do anything you want to
composeView.close(); // this will close the compose window
})
Before gmail sends mail itself, you can send the mail using gmail api as you are doing and then this will close the compose window and save the draft.
As you have integrated your own send button, you will need to use the library accordingly.
In my application , I have to provide a download button, so that when user clicks on it he/she can download file.
Right now in my application i have a feature that when user clicks on download button , I disable my download button until download pop-up is opened.
Now, I want that when download completes on client side , then download button should be enable to the client.
I want to know that is it possible ? If yes , then please tell me how can i achieve that.
From the [link][1] i Pasted , you can do this using jQuery :
Suppose you have an
<input id="FileDownload" type="button" name="FileDownload">Download</input>
You can define a jQuery event on the Click of this button
$("#FileDownlaod").click(function(){
this.disabled=true; //Disables the input button
/Call the plugin as described in the link
//On Success this.disabled=false
});