• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

259
Vistas
Changing text inside upload button after uploading

I have the following code:

<div className='file-upload-wrapper' data-text='Select your file!'>
            <input
              type='file'
              id='upload'
              className='file-upload-field'
              placeholder='Enter Item Name'
              required
              onChange={(e) => setUpload(e.target.value)}
              onClick={changeUploadTxt}
            ></input>
          </div>

The CSS for this:

.file-upload-wrapper {
  position: relative;
  width: 400px;
  height: 40px;
}

.file-upload-wrapper::after {
  content: attr(data-text);
  font-size: 18px;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  padding: 10px 15px;
  display: block;
  width: calc(100% - 40px);
  pointer-events: none;
  z-index: 20;
  height: 40px;
  line-height: 40px;
  color: #999;
  border-radius: 5px 10px 10px 5px;
  font-weight: 300;
}

.file-upload-wrapper::before {
  content: "Upload";
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  height: 60px;
  background: #4daf7c;
  color: #fff;
  font-weight: 700;
  z-index: 25;
  font-size: 16px;
  line-height: 40px;
  padding: 0 15px;
  text-transform: uppercase;
  pointer-events: none;
  border-radius: 0 5px 5px 0;
}

.file-upload-wrapper::hover {
  background: darken(#4daf7c, 40%);
}

I was trying to do something with this, but it didn't worked:

const changeUploadTxt = () => {
    //const txtDiv = document.getElementsByClassName("file-upload-wrapper");
  };

I also changed the CSS content with before and after, but it didn't worked. Do you know a method for making sure that files are uploaded and change the text after inside the div tag?

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

This isn't how React works. Don't think of it in terms of directly manipulating the DOM in an event handler. Instead, think of it in terms of managing state.

  • The render operation displays a state value
  • The event updates the state value

So in the start of your component (assuming a function component, since that's the preferred approach for new development at this time) you might declare a state value:

const [uploadText, setUploadText] = useState('Select your file!');

Then you'd use that value in your rendering:

<div className='file-upload-wrapper' data-text={uploadText}>

Now all you have to do is update the state value any time you want it to change:

const changeUploadTxt = () => {    
  setUploadText('Some new value');
};

Any time you update state, that will trigger the component to re-render. Which is also why you don't directly manipulate the DOM in React (unless you really know what you're doing under the hood in the framework), because a re-render will break whatever changes you made to the DOM.

almost 3 years ago · Juan Pablo Isaza Denunciar

0

you can use innerHtml for adding a text.

const changeUploadTxt = () => {    
    document.getElementsByClassName("file-upload-wrapper").innerHTML += "Upload";
};
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda