How to handle fetching image that doesn't exists yet in JavaScript when using LiipImagineBundle

Question

I would like to check if a file exists in NodeJS.

I saw this solution in another post :

const tryRequire = (path) => {
  try {
   return require(`${path}`);
  } catch (err) {
   return null;
  }
};

But is it really a good solution?

In my case I'm checking a lot of file, so I'm gonna import with the require each file I'll check (so a lot of files). I just want to know if the file exists or not and don't import it.

How could I do this?

EDIT:

I'm explaining my issue in details.

I'm in a Symfony and React project. I'm new with React.

There is a possibility to upload images in a chat. When uploading an image, I call a Symfony route. In this route I use Liip Imagine bundle. So I'm doing something like this to cache the image :

public function new(Request $request, SerializerInterface $serializer): Response
{
    $rewardImagePath = $this->uploaderHelper->asset($media, 'imageFile');
        if($rewardImagePath) {
            $cacheImagePath = $this->cacheManager->getBrowserPath($rewardImagePath, 'live_feed_message');
        }
}

The issue is that function getBrowserPath give me the URL of the future cached file. But the file takes a significant time (like 5/10 seconds sometimes) to be created. So in my front I have the new chat message but in reality the file associated don't exists on the server. So it displays a message without image.

For some unknow reasons, if I'm doing a while file exists in this controller, I got a time out and the file is never created. That's why I'm trying to check the file existence in react side.

use other nodejs techniques ... like `fs.existsSync(path)` method — Jaromanda X, May 06 '19 at 15:48
JavaScript runs in browser unless you use node.js, which runs most servers and OSes. Therefore JavaScript can't access file system(node.js can). — ramazan polat, May 06 '19 at 15:51
Sorry I'm using React environment. Don't mentionned in post but I added tag.. — Alexis, May 06 '19 at 15:52
so, your browser code is trying to see if files exist on the server? Wouldn't the server side be the place to determine their existence? — Jaromanda X, May 06 '19 at 15:53
I edited the question since you mentioned that `require` works, it indicates that it's unrelated to the browser or React. — Emile Bergeron, May 06 '19 at 16:00
Bad choice of duplicate @EmileBergeron if you read the OP's comments — Jaromanda X, May 06 '19 at 16:03
@JaromandaX doesn't matter if he uses React, it's developed in a Node environment anyway, — Emile Bergeron, May 06 '19 at 16:06
yeah ... but the *browser* can't use server side *modules* like `fs` for example - i.e the accepted answer in your "duplicate" suggests `You can use fs.existsSync()` ... that won't work — Jaromanda X, May 06 '19 at 16:07
@JaromandaX my guess is that it's an XY problem where OP doesn't really need to check if a file exists, but only him can clarify that. — Emile Bergeron, May 06 '19 at 16:07
@EmileBergeron - I apologise ... OP has clarified, you are indeed correct (as was I in the very first comment) — Jaromanda X, May 06 '19 at 16:08
@JaromandaX React is developed in a Node environment, where server side modules are available. Checking file existence only makes sense at build time anyway. — Emile Bergeron, May 06 '19 at 16:09
well ... the question now asks "I would like to check if a file exists in NodeJS" - so `react` is a moot point :p — Jaromanda X, May 06 '19 at 16:09
@EmileBergeron - "check if a file exists in NodeJS" is clear I would think — Jaromanda X, May 06 '19 at 16:12
I updated my post to explain correctly and with more details my issue — Alexis, May 06 '19 at 16:17
@JaromandaX Looks like we were wrong. While unrelated to React, it is also unrelated to Node. — Emile Bergeron, May 06 '19 at 16:23
My guess would be that you should do the check in Php and return a temporary image file URL (like a generic placeholder) while the image is not available. Then, when fetching other messages, you can check again and update the payload accordingly. — Emile Bergeron, May 06 '19 at 16:27
Otherwise: [JavaScript to replace broken images](https://stackoverflow.com/q/92720/1218980) — Emile Bergeron, May 06 '19 at 16:28
I tried your link but it doesn't works. I think that's because when we call the URL, LiipImagine Bundle recreate the image in cache if it doesn't exists. So it probably return each time a success and never an error. But it takes sometimes a long time to generate the image and during this time I've no images — Alexis, May 09 '19 at 15:28

score -1 · Answer 1 · answered May 06 '19 at 15:51

-1

you can try:

function doesFileExist(urlToFile) {
var xhr = new XMLHttpRequest();
xhr.open('HEAD', urlToFile, false);
xhr.send();

if (xhr.status == "404") {
    return false;
} else {
    return true;
}
}

answered May 06 '19 at 15:51

Aurele Collinet

138
1
16

This assumes they are looking to do something client-side and not in NodeJS, which still isn't completely clear. – Bryan May 06 '19 at 15:53
Yes i saw his reply after, i'll leave it here even if its a repost, might help someone – Aurele Collinet May 06 '19 at 15:55

How to handle fetching image that doesn't exists yet in JavaScript when using LiipImagineBundle

1 Answers1