Having issue with retrieving files from container which are successfully inserted

Hi, I am having an issue to retrieve files from the container that I have successfully uploaded to. I do not understand the issue here.

Below is the screen shot. Please help me.

1 Like

Hi Vijay,

It looks like you are using safeMutableData.applyEntriesMutation to commit to the network.

Will you post your source code so that I can see what may be occurring?

1 Like
  <title>Safe Tube - Video Gallery</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/thumbnail-gallery.css" rel="stylesheet">
  <!-- Page Content -->
  <div class="container">
  	<h4 class="my-4 text-center text-lg-left">safeMutableData Gallery</h4>
  	<div id="imgDiv" class="row text-center text-lg-left">
  		<div class="col-lg-10 col-md-4 col-xs-6">
  			<input type="file" id="vfile" name="vfile" accept="video/*" formenctype="multipart/form-data"/>
  			<button type="button" id="btnupload" onclick="uploadVideo()">Upload</button>
  		</div>
  		<div class="col-lg-10 col-md-4 col-xs-6">
  			<button type="button" id="btnlist" onclick="listVideos()"> List Videos </button>
  			<select id="selvideo" class="img-fluid im-thumbnail"></select>
  		</div>
  	</div>
  </div>
  <!-- /.container -->

  <!-- Footer -->
  <footer class="py-5 bg-dark">
  	<div class="container">
  		<p class="m-0 text-center text-white">BABY Safe</p>
  	</div>
  	<!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script type="text/javascript">
  	//Public Variables
  	var app = {
  		name : 'SafeTube',
  		id : 'id.vijay.safetube',
  		version : '1.0',
  		vendor : 'MaidSafe BabySAFE',
  	};
  	
  	var privileges = {
  		'_public' : [
  			'Read',
  			'Insert',
  			'Update',
  			'Delete',
  			'ManagePermissions',
  		],
  		'_publicNames' : [
  			'Read',
  			'Insert',
  			'Update',
  			'Delete',
  			'ManagePermissions'
  		]
  	};
  	var owncontainer = {
  		own_container: true
  	};
  	
  	var container = 'apps/id.vijay.safetube';
  	//--End of Public variables
  	function authorise(){
  		window.safeApp.initialise(app)
  			.then((appToken) => {
  				//Tracking
  				console.log('Initialising Token - ' + appToken );
  				window.safeApp.authorise(appToken, privileges, owncontainer)
  					.then((auth) => {
  						window.safeApp.connectAuthorised(appToken, auth)
  							.then((authorisedAppToken) => {
  								window.auth = authorisedAppToken;
  								//Tracking
  								console.log('Authorised App Token ' + authorisedAppToken );
  								//listVideos();
  							});
  					});
  			
  			},
  			(err) => {
  				console.error('Error Authorisation' + err);
  			});
  	}
  			
  	function listVideos(){
  		window.safeApp.getContainer(auth, container)
  			.then((mdHandle) => {
  				//Tracking
  				console.log('Handle ' + mdHandle);
  				window.safeMutableData.getEntries(mdHandle)
  					.then((entries) => {
  						window.safeMutableDataEntries.len(entries).then((len) => console.log("Number of entries found in the container (" + container + ") is :" + len));
  						window.safeMutableDataEntries.forEach(entries, (key, value) => {
  							//Tracking
  							console.log('File found ' + new TextDecoder("utf-8").decode(key));
  							//document.getElementById('imgDiv').innerHTML += '<div class="col-lg-3 col-md-4 col-xs-6"><a href="#" class="d-block mb-4 h-100"><video class="img-fluid img-thumbnail video-js" controls> <source src="data:video/' + (new TextDecoder("utf-8").decode(key)).split('.').pop() + ';base64,' + arrayBufferToBase64(value.buf) + '" type="video/' + (new TextDecoder("utf-8").decode(key)).split('.').pop() + '"></video></a></div>';
  							addOptionToSelect(document.getElementById("selvideo"), new TextDecoder("utf-8").decode(key),  new TextDecoder("utf-8").decode(key));
  						});
  					});
  			},
  			(err) => {
  				console.error('Error lising videos' + err);
  			});
  	}
  	
  	function arrayBufferToBase64(_buffer) {
  		var _binary = '';
  		var _bytes = new Uint8Array(_buffer);
  		var _len = _bytes.byteLength;
  		
  		for (var inc  = 0; inc < _len; inc++) {
  			_bytes += String.fromCharCode(_bytes[inc]);
  		}
  		
  		return _bytes.buffer;
  	}
  	
  	function uploadVideo() {
  		
  		var input = document.getElementById("vfile");
  		var _reader = new FileReader();
  		
  		_reader.onload = function() {
  			var array = _reader.result;
  		};
  		
  		_reader.readAsArrayBuffer(input.files[0]);
  		
  		console.log('_file.files[0].name :' + input.files[0].name);
  		
  		window.safeApp.getContainer(auth, container)
  			.then((mdHandle) => {
  				window.safeMutableData.newMutation(auth)
  					.then((mutationHandle) => 
  						window.safeMutableDataMutation.insert(mutationHandle, input.files[0].name, _reader.result).then(() =>
  							console.log('New mutation entry has been committed to the network. Container : ' + container)));
  			},
  			(err) => {
  				console.error(err);
  			});
  	}
  	
  	function addOptionToSelect(_select, _value, _text) {
  		var option = document.createElement('OPTION');
  		option.value = _value;
  		option.text = _text;
  		
  		_select.add(option);
  	}
  	
  </script>

I think it’s just what I mentioned in this other thread and what @hunterlester thought you are doing but you are actually missing that: Cannot read property 'buffer' of null
You need to apply the mutations after inserting them in the mutations object.

3 Likes

Understand your point @bochaco I will be glad if it works fine. :slight_smile: Thank you.

2 Likes

This topic was automatically closed after 60 days. New replies are no longer allowed.