UXP file dialog select multiple image types

Photoshop UXP Plugin API
,
1

Greetings everyone.

I have made a simple plugin so far which includes loading files. I have come across an issue that I haven’t found a solution for in the docs. According to the documentation, I can specify what file types I want to allow the user to load. This works, however it only allows the user to load one file type at a time. Either only pngs, or only jpegs, etc. I remember that there are multiple applications that allow user to see all filetypes that are allowed at once in the file dialog, however I cannot find a way to do it here. Is it even possible or do I have to allow the user to select any fiel type and then just filter the picked files?

this here is an example of what I mean. For example for the jpeg 2000, it allows the user to see mutliple file extensions at once in the file dialog. If there is a way to do this for specific file types that I pick, it would help out a lot.
image

Thanks in advance

2

You’ve exposed the problem, but you haven’t posted any code. In any case, if you just want to open files and have the file options appear in the dialog box, you can use that.

document.getElementById('btnAbrir').addEventListener('click', async () => {
  const arquivos = await fs.getFileForOpening({ allowMultiple: true });
  if (!arquivos) return;
  const lista = Array.isArray(arquivos) ? arquivos : [arquivos];
  await core.executeAsModal(() => Promise.all(lista.map(app.open)), {
    commandName: "Abrir imagens"
  });
});
1 Like
3

Maybe you mean you want to specify multiple extensions that can be selected in the dialog. How about something like this?

/**
  * @file chooseMultipleExtensions.psjs
*/

const { localFileSystem } = require('uxp').storage ;
const { app } = require('photoshop') ;

const entries = await localFileSystem.getFileForOpening({
  types: ['jpeg', 'jpg', 'png'], 
  allowMultiple: true
}) ;

for(const entry of entries) {
  const extension = entry.name.match(/(?<=\.)[a-z0-9]{2,4}$/i)?.[0].toLowerCase() ;

  // do something per extension
  switch(extension) {
    case 'jpeg':
    case 'jpg':
      await app.showAlert(`This is JPEG file`) ;
      break ;
    case 'png':
      await app.showAlert(`This is PNG file`) ;
      break ;
    default:
      await app.showAlert(`Other: ${extension || 'undefined'}`) ;
      break ;
  }
}
4

So, my problem is this. When specifying allowed file extensions, such as this:

            const allowedFileExtensions = storage.fileTypes.images.concat(["jpeg", "psd", "psb"])
            const files = await fs.getFileForOpening({allowMultiple: true, types: allowedFileExtensions})
            if (files.length < 1) {
                return
            }

What I end up with is the file dialog only allowing these extensions, however only one at a time, such as is shown here:

image
image187×124 2.1 KB

However, this is not what I want. This doesn’t allow me to select for example all the pngs and jpgs at once. Instead, I would like to do something that allows me to see and select all the allowed extensions at once, something like in html input tags, where you have the accept parameter and it allows you to select all image types at once using something like this:
image

I haven’t found a way around just allowing the user to pick all files and then just filtering them if they have the correct extension

5

If I’m clear, you need to have the option to show all files, and also the option to show separate extensions.
In this case, add [“*”] to the Options Array right at the beginning if you want the All format (*.*) option to appear first.

    const allowedFileExtensions = storage.fileTypes.images.concat(["jpeg", "psd", "psb","*"])
            const files = await fs.getFileForOpening({allowMultiple: true, types: allowedFileExtensions})
            if (files.length < 1) {
                return
            }
6

So, I had this before. And it’s a fine way of doing it but still not exactly what I am asking for. What I am asking for is to only show the files in my array but all at once.

image
image431×150 19.8 KB

An example is something like this. I would like for it to show these files but not unsupported files at once. So stuff like .zip wouldn’t be shown but stuff like .png and .psd would be.

It’s fine if it’s not possible, but I am just wondering if it is possible, because in normal browser html you can do that