Include file ext in getFileNameFromUrl

GoogleForCreators · Jul 28, 2022 · 3c8881d · 3c8881d
1 parent 0598521
commit 3c8881d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/packages/media/src/fetchRemoteFile.js b/packages/media/src/fetchRemoteFile.js
@@ -20,14 +20,11 @@
 import getFileNameFromUrl from './getFileNameFromUrl';
 import fetchRemoteBlob from './fetchRemoteBlob';
 import blobToFile from './blobToFile';
+import getFileBasename from './getFileBasename';
 
 function generateFileName(url) {
   const currentFileName = getFileNameFromUrl(url);
-  const currentFileExt = currentFileName
-    .split(/[#?]/)[0]
-    .split('.')
-    .pop()
-    .trim();
+  const currentFileExt = getFileBasename({ name: currentFileName });
 
   return currentFileName.replace(
     `.${currentFileExt}`,

diff --git a/packages/media/src/getFileNameFromUrl.js b/packages/media/src/getFileNameFromUrl.js
@@ -13,7 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const getFileNameFromUrl = (url) =>
-  url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
+
+/**
+ * Returns the file name including extension from a URL.
+ *
+ * @param {string} url File URL.
+ * @return {string} File name.
+ */
+function getFileNameFromUrl(url) {
+  return url.split('/').at(-1).split(/[#?]/).at(0);
+}
 
 export default getFileNameFromUrl;
diff --git a/packages/story-editor/src/app/media/utils/useUploadVideoFrame.js b/packages/story-editor/src/app/media/utils/useUploadVideoFrame.js
@@ -23,6 +23,7 @@ import {
   preloadImage,
   getFirstFrameOfVideo,
   getFileNameFromUrl,
+  getFileBasename,
 } from '@googleforcreators/media';
 /**
  * Internal dependencies
@@ -116,7 +117,9 @@ function useUploadVideoFrame({ updateMediaElement }) {
       const trackTiming = getTimeTracker('load_video_poster');
       try {
         const originalFileName = getFileNameFromUrl(src);
-        const fileName = getPosterName(originalFileName);
+        const fileName = getPosterName(
+          getFileBasename({ name: originalFileName })
+        );
         const obj = await getFirstFrameOfVideo(src);
         const { posterId, poster, posterWidth, posterHeight } =
           await uploadVideoPoster(id, fileName, obj);