Texture Loading uploading src on drop or input type file

Questions
1

Hi sorry for this simple question I’m a new learner :slight_smile: I want to change my texture of gltfobject I can do it when I give texture path as a string but I can’t get file path when I’am using input type file, so is there any other way for texture loader to work on drop or with base64/buffer, etc… Thanks for any help :slight_smile:

2

This can be done by using the FileReader. It is used in the three.js edtior and examples for supporting texture uploads via Drag’n’Drop or an Input HTML tag. I suggest you study the implementation of the following example. Especially the code path that handles JPG/PNG in loadFile() and handleJPG().

https://threejs.org/examples/webgl_materials_matcap

1 Like
3

I just loaded a text file in my current project.

This is similar.

Maybe the code snippet compared to the previous links can help:
( readAsArrayBuffer( file ) / readAsDataURL( file ) / here readAsText( file ) )

<body>
	<div id = 'wrap'>
		<div id = 'lft'>
			<input type="file" id="hcxLoad">
			<label for="hcxLoad" id="selectInputFile"> select </label>
		</div>
	</div>
</body>

const right = ( s, n ) => ( n === 0 ? '' : s.substr( -n ) );
const gettext = ( elm ) => ( elm.innerHTML || elm.value );

function _RCL( ) { // recall

  const reader = new FileReader( );
  const file = hcxLoad.files[0];
  
  const type = '.hcx';
  
  if ( file !== undefined  && right( file.name, 4 ) === type ) { // right is defined above 
    
	reader.addEventListener( 'loadend',
	
	function( ) {
		
		hcxTextArea.value = reader.result;
		hcxArr = gettext( hcxTextArea ).match(/[^\r\n]+/g); // separate by line ends, bring into array , gettext is defined above
			
		console.log( 'hcxArr', hcxArr ) ////////////////////////////////////////////////////////////////////////
	 
  			
	});
  
  	reader.readAsText( file );
  
  } else {
  	
	alert( 'incorrect file type or no selection, use *.hcx' );

	
  }

}
1 Like
4

Look there https://web.dev/read-files/ :slightly_smiling_face:

5

Thanks a lot for the suggestion, it works now :slight_smile: I’m happy :partying_face: I realized you are always answering the question on discourse I assume you are good at, can you give advice/link to watch a tutorial? Otherwise, I’m gonna ask a lot of question :face_with_hand_over_mouth:

6

Thank you, Im looking :slight_smile: