Re-open a dialog

Questions / Help
1

I trying to understand how to re-open a dialog after it was closed. Because if the user closed the dialog and doesn’t click add - the uploaded images are gone. I don’t see anywhere in docs to make the dialog show or reappear once its initialized. Or I could also bypass the “Done” button and just have the uploads added immediately after upload. Seems like an extra unnecessary step. Any help is greatly appreciated

I am using code:

	window._dialog = uploadcare.openDialog([],'',{
			"publicKey": "XXXXX",
			"multiple": true,
			"tabs": "file camera url facebook gdrive gphotos dropbox instagram onedrive box",
			"effects": "crop, flip, rotate, mirror"
	}).done(({ promise, files }) => {
		const isGroup = Boolean(files);
		return promise().then(info => {
		  if (isGroup) {
			return Promise.all(
			  files().map(promise => promise.then( function(fileinfo){
					_tmp.push(fileinfo);
			  })),
			).then(
				_this.sendimgcData(_tmp)
			)
		  } else {
			_this.sendimgcData(info);
		  }
		});
	});
2

I actually figured it out- updated code…

createDialog( fles ){

	let _this = this;
	let _tmp = [];
	
		
	if( fles ){
		let i;
		for(i=0; i<fles.length; ++i){
			_this.__ufiles.push(  uploadcare.fileFrom('object', fles[i] )  );
		}
	}
		
	this._dialog = uploadcare.openDialog( _this.__ufiles ,'',{
			"publicKey": "XXXXXXX",
			"multiple": true,
			"tabs": "file camera url facebook gdrive gphotos dropbox instagram onedrive box",
			"effects": "crop, flip, rotate, mirror, enhance, sharp"
	}).done(({ promise, files }) => {
		const isGroup = Boolean(files);
		return promise().then(info => {
		  if (isGroup) {
			return Promise.all(
			  files().map(promise => promise.then( function(fileinfo){
					_tmp.push(fileinfo);
			  })),
			).then(
				_this.sendimgcData(_tmp)
			)
		  } else {
			_this.sendimgcData(info);
		  }
		});
	});	
	
	this._dialog.done(function(result) {
	  _this.__ufiles = [];
	});		

	this._dialog.fail(function(result) {
	  _this.__ufiles =  _this._dialog.fileColl.__items;
	});
			
	uploadcare.registerTab('preview', uploadcareTabEffects);
	

}
3

Hi @Michael_Connors, let me suggest another solution. You can use the dialog’s fileColl API to save uploaded files on the go even if the user hasn’t clicked Add

let files = [];

function openDialog() {
  // Create a new dialog instance
  const dialog = uploadcare.openDialog(files, "", {
    multiple: true
  });

  // Save uploaded files to `files` array
  dialog.fileColl.onAdd.add((file) => {
    files.push(file);
  });

  // User clicks Add. Handle dialog.done
  dialog.done((group) => {
    // If user clicks Add, we clear the `files` array
    files = [];

    group.files().forEach((file) => {
      file.done(({ cdnUrl }) => {
        console.log(cdnUrl);
      });
    });
  });
}

Here’s a demo on Codesandbox so you can check it live Populate dialog with previously uploaded files - CodeSandbox

Let me know what you think.