Opensea viewer

client/src/components/Viewer/Viewer.js

@@ -110,6 +110,7 @@ function Viewer(props) {
         const formData = new FormData();
         setDisplayProgressBar(true);
         formData.append('file', file);
+        console.warn('file__', file);
         let bucketURL = config.BASE_URL + '/objects/' + shortEmail;
 
         try {

client/src/components/Viewer/components/GetFiles/components/RenderFiles/components/OpenSeaDragon/OpenSeadragonViewer.js

@@ -40,8 +40,8 @@ function OpenSeadragonViewer({
         id: 'openseadragon-viewer',
         prefixUrl: `${constants.OSD_PREFIX_URL}`,
         tileSources: {
-          width: 29164,
-          height: 8592,
+          width: imageName.width,
+          height: imageName.height,
           tileSize: 4096,
           tileOverlap: 0,
           getTileUrl: function (level, x, y) {

server/Database_queries/queries.js

@@ -14,13 +14,21 @@ const get_user_bucket = async user => {
 //     let query = `DELETE FROM User_Bucket where user = '${user}';`
 //     return await execSql(query)
 // }
-const map_file_type = async (user, fileId, bucketName, filename, file_type) => {
-  let query = `INSERT INTO FileTypeMap (user_name,file_unique_id, bucket_name, filename, file_type, upload_date) VALUES ('${user}','${fileId}','${bucketName}','${filename}' ,'${file_type}',NOW());`;
+const map_file_type = async (
+  user,
+  fileId,
+  bucketName,
+  filename,
+  file_type,
+  width,
+  height,
+) => {
+  let query = `INSERT INTO FileTypeMap (user_name,file_unique_id, bucket_name, filename, file_type, upload_date, width, height) VALUES ('${user}','${fileId}','${bucketName}','${filename}' ,'${file_type}',NOW(), '${width}', '${height}');`;
   return await execSql(query);
 };
 
 const file_stats = async (user, bucketName, filename) => {
-  let query = `SELECT file_unique_id, file_type, upload_date, is_uploaded from FileTypeMap where filename = '${filename}' AND bucket_name = '${bucketName}' AND user_name = '${user}' AND is_uploaded=${1};`;
+  let query = `SELECT file_unique_id, file_type, upload_date, is_uploaded, width, height from FileTypeMap where filename = '${filename}' AND bucket_name = '${bucketName}' AND user_name = '${user}' AND is_uploaded=${1};`;
   return await execSql(query).then(res => {
     return res;
   });

server/db_setup/create_schema.sql

@@ -16,5 +16,7 @@ CREATE TABLE FileTypeMap (
     filename varchar(255),
     file_type varchar(255),    
     upload_date DATETIME,
+    width int,
+    height int,
     is_uploaded boolean DEFAULT 0
 );

server/routes/objects.js

@@ -80,6 +80,8 @@ router.get('/:url', async (req, res) => {
                     date: response[0]?.upload_date,
                     fileId: uniqueId,
                     isUploaded: response[0]?.is_uploaded,
+                    width: response[0]?.width,
+                    height: response[0]?.height,
                   });
                 }
               },
@@ -228,8 +230,8 @@ router.post('/:url', async function (req, res) {
     // count = 0;
     const form = formidable({
       multiples: false,
-      maxTotalFileSize: 2000 * 1024 * 1024,
-      maxFileSize: 2000 * 1024 * 1024,
+      maxTotalFileSize: 10000 * 1024 * 1024,
+      maxFileSize: 10000 * 1024 * 1024,
     });
     form.parse(req, async (err, fields, files) => {
       if (err) {
@@ -249,14 +251,22 @@ router.post('/:url', async function (req, res) {
         let fileId = uuidv4();
         let pngFileName = tempName + '.png';
         let tempDirPath = path.resolve(__dirname, '../temp');
+        let height = 0,
+          width = 0;
 
-        await map_file_type(user, fileId, bucketName, tempName, parts[1]);
-        // let fileInfo = await file_stats(bucketName, tempName);
-        // let fileId = fileInfo[0].file_unique_id;
         if (
           files.file[0].mimetype === 'image/jpeg' ||
           files.file[0].mimetype === 'image/png'
         ) {
+          await map_file_type(
+            user,
+            fileId,
+            bucketName,
+            tempName,
+            parts[1],
+            width,
+            height,
+          );
           minioClient.fPutObject(
             bucketName,
             'hv/' + user + '/thumbnail/' + fileName + fileId,
@@ -265,7 +275,6 @@ router.post('/:url', async function (req, res) {
               if (err) {
                 return res.status(400).json({ error: 'Failed to upload' });
               }
-              // await file_uploaded(user, bucketName, tempName, parts[1]);
               res
                 .status(200)
                 .json({ data: objInfo, filename: tempName, format: parts[1] });
@@ -284,6 +293,37 @@ router.post('/:url', async function (req, res) {
           sockets[socket_id].disconnect();
           removeSocket(socket_id);
         } else {
+          const command1 = `vipsheader`;
+          const args1 = [`${filePath}`];
+
+          const childProcess1 = spawn(command1, args1);
+
+          childProcess1.stdout.on('data', data => {
+            const output = data.toString();
+            const dimensions = output.match(/(\d+)x(\d+)/);
+            if (dimensions) {
+              width = parseInt(dimensions[1]);
+              height = parseInt(dimensions[2]);
+            }
+            console.warn(width, height);
+          });
+
+          childProcess1.stderr.on('data', err => {
+            console.error('Error:', err.toString());
+          });
+
+          childProcess1.on('close', async () => {
+            await map_file_type(
+              user,
+              fileId,
+              bucketName,
+              tempName,
+              parts[1],
+              width,
+              height,
+            );
+          });
+
           const command = `vips`;
           const args = [
             'dzsave',

server/server.js

@@ -35,6 +35,7 @@ app.use('/hv/link', require_auth_proxylinks, proxyLinks);
 // app.use('/hv/getURL',getURL);
 // app.use('/hv/deleteBucket',deleteBucket);
 // app.use('/hv/deleteObject',deleteObject);
+// app.use('/hv/link', proxyLinks);
 
 app.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname, 'build', 'index.html'));