Azure – die neusten Beiträge

Upload API mit NextJS und Azure Portal funktioniert nicht?

Hallo, ich bekomme wenn ich Videos über die API in Azure Portal hochlade immer eine Fehlermeldung. Manchmale sieht sie so aus:

Parsed files: {
  videoFile: [
    PersistentFile {
      _events: [Object: null prototype],
      _eventsCount: 1,
      _maxListeners: undefined,
      lastModifiedDate: 2024-12-17T10:12:37.964Z,
      filepath: 'C:\\Users\\thoma\\AppData\\Local\\Temp\\19612948a7cd7d81f78632e00.mp4',
      newFilename: '19612948a7cd7d81f78632e00.mp4',
      originalFilename: 'sample-2.mp4',
      mimetype: 'video/mp4',
      hashAlgorithm: false,
      size: 30424618,
      _writeStream: [WriteStream],
      hash: null,
      [Symbol(shapeMode)]: false,
      [Symbol(kCapture)]: false
    }
  ]
}

Manchmal (gefühlt oft bei kleineren Dateien) funktioniert es auch der Log sieht dann so aus:

Uploading file from path: C:\Users\thoma\AppData\Local\Temp\19612948a7cd7d81f78632e00.mp4
Request timed out!
File uploaded to Azure successfully: sample-2.mp4

Hier lade ich noch den API Code hoch:

import { BlobServiceClient, generateBlobSASQueryParameters, BlobSASPermissions } from '@azure/storage-blob';
import formidable from 'formidable';
import fs from 'fs/promises';
import { v4 as uuidv4 } from 'uuid';


export const config = {
  api: {
    bodyParser: false, // Disable default body parsing for file uploads
  },
};


// Azure Storage connection string
const AZURE_STORAGE_CONNECTION_STRING =
  'DefaultEndpointsProtocol=https;AccountName=innowesovideos;AccountKey=uyJz3dlCW/hd+t3Y48pSfuk1Q+pV63S1Hs48uvGIJW3ubaO/ngtSMrzoKRvBE4so7MP9zz73uaLl+AStwmS6EA==;EndpointSuffix=core.windows.net';


export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Only POST requests are allowed' });
  }


  let filePath = ''; // Variable to track the file path for cleanup


  try {
    // Set a timeout to prevent stalls
    const timeout = setTimeout(() => {
      console.error('Request timed out!');
      if (!res.writableEnded) {
        res.status(504).json({ message: 'Request timed out. Please try again.' });
      }
    }, 15000); // 15-second timeout


    // Initialize formidable for file parsing
    const form = formidable({
      keepExtensions: true, // Keep file extensions
      maxFileSize: 5000 * 1024 * 1024, 
    });
    console.log('New filesize')


    // Parse the incoming form data
    const { files } = await new Promise((resolve, reject) => {
      form.parse(req, (err, fields, files) => {
        if (err) {
          console.error('Error parsing form:', err);
          reject(err);
        } else {
          resolve({ fields, files });
        }
      });
    });


    console.log('Parsed files:', files);


    // Normalize videoFile input (handle single and multiple files)
    const fileData = Array.isArray(files.videoFile) ? files.videoFile[0] : files.videoFile;


    // Validate file presence and format
    if (!fileData || !fileData.filepath) {
      throw new Error('No video file provided.');
    }


    filePath = fileData.filepath;
    if (!filePath) throw new Error('No valid file path found.');
    if (fileData.mimetype !== 'video/mp4') throw new Error('Only MP4 files are allowed.');


    console.log('Uploading file from path:', filePath);


    // Generate a unique file name for Azure Blob Storage
    const fileName = fileData.originalFilename || `${uuidv4()}.mp4`;


    // Load the file as a buffer
    const fileBuffer = await fs.readFile(filePath);


    // Initialize Azure Blob Storage Client
    const blobServiceClient = BlobServiceClient.fromConnectionString(AZURE_STORAGE_CONNECTION_STRING);
    const containerClient = blobServiceClient.getContainerClient('videos');
    const blockBlobClient = containerClient.getBlockBlobClient(fileName);


    // Upload the file to Azure Blob Storage
    await blockBlobClient.uploadData(fileBuffer, {
      blobHTTPHeaders: { blobContentType: 'video/mp4' },
    });
    // Generate a SAS token for the uploaded file
    const sasToken = generateBlobSASQueryParameters(
      {
        containerName: 'videos',
        blobName: fileName,
        permissions: BlobSASPermissions.parse('r'), // Read permissions
        startsOn: new Date(),
        expiresOn: new Date(new Date().valueOf() + 3600 * 1000), // Token valid for 1 hour
      },
      blobServiceClient.credential
    ).toString();
    const videoUrl = `${blockBlobClient.url}?${sasToken}`;
   
    clearTimeout(timeout);

    return res.status(200).json({ message: 'Video uploaded successfully', videoUrl });
  } catch (error) {
    console.error('Error during upload:', error.message);
    return res.status(500).json({ message: 'File upload failed', error: error.message });
  } finally {
    
    if (filePath) {
      try {
        await fs.unlink(filePath);
        console.log(`Temporary file deleted: ${filePath}`);
      } catch (cleanupErr) {
        console.error(`Failed to delete temporary file: ${filePath}`, cleanupErr);
      }
    }
  }
} 

Danke!

HTML, JavaScript, Programmiersprache, Webentwicklung, azure, React

Wie aktiviere ich X-Frame-Option auf Tomcat Server?

Hallo zusammen

in meiner Firma wurde eine Software eines Drittanbieters massgeschneidert und für uns eingeführt. Eine Funktion der neunen Software. Sie kann iFrames anzeigen. Im Grunde ist es ein Monitoringtool, wie es in der IT oft zur Anwendung kommt. Und dieses Tool kann eben iFrames anzeigen. Nun geht das auch, wenn das iFrame auf eine externe Seite verweist. Wenn wir aber eine Seite in der eigenen Domain (also z.B. intranet) anzeigen wollen, geht das nicht.

mit viel google ich das Problem soweit analysiert, dass ich sagen würde folgendes steht hier an:

  • die X-Frame-Option muss aktiviert werden.

Ich habe auch raus, dass das offenbar auf dem Server gemacht werden muss, auf welchem die Software betrieben wird. Dachte erst das ist eine Browsereinstellung. Auf alle Fälle, ihr dürft raten, krieg ich es nicht hin.

Die Applikation wir auf einem Tomcat / Catalina gefahren und auf Azure gehostet. Wenn ich auf dem Server (Tomcat) unter /usr/local/tomcat/config die web.xml Datei manipuliere (wie durch einige Formen ergooglet) überspielt mir Azure jedes mal das Verzeichnis mit frischen Files. das angepasste web.xml greift somit nie. Ich weiss nicht warum jedes Mal ein frisches Verzeichnis angelegt wird.

auch habe ich einen stackOverflow-Post gefunden bei dem auf das web.config File in Azure verwiesen wird. Nur leider wird nicht erwähnt, wo ich das finden kann (wäre so zu sagen mein zweiter Lösungsansatz). Weiter wird folgendes erwähnt:

"X-Frame-Options is not working when hosted in the Azure app service, it works fine locally, When the run the application ( React + Web API ) locally and I have created an HTML page with an iFrame in it accessing the localhost URL when X-Frame-Options is set to DENY in middleware like below, then it works fine iFrame won't be able to load the site.

app.Use(async (context, next) =>

       {

           context.Response.Headers.Add("X-Frame-Options", "DENY");

           await next();

       });

Same code when hosted and when we put the hosted Azure app service URL in the iFrame, then it iFrame is able to load the app, which is kind of weird."

Problem also erkannt. nur weiss ich nicht, wo ich diese Manipulation vornehmen kann. steh hier total an. Habt ihr eine gute Idee zur Lösung des Problems?

Grüsse euch

Server, Microsoft, Linux, Apache, ssh, Unix, Serverprobleme, azure, tomcat, Apache Server, Catalina

Meistgelesene Beiträge zum Thema Azure