MediaWiki:SimpleBatchUploadUpgrade.js: Unterschied zwischen den Versionen

Aus FürthWiki

Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
 
Zeile 1: Zeile 1:
if (mw.config.get('wgCanonicalSpecialPageName') === 'BatchUpload') {
if (mw.config.get('wgCanonicalSpecialPageName') === 'BatchUpload') {
     $(function () {
     $(function () {
         const $form = $('#fileupload');
         const $uploadForm = $('#fileupload');
         const $preview = $('<div id="file-preview-area"><h3>📄 Dateivorschau</h3><table><thead><tr><th>Original</th><th>Neuer Name</th><th>Status</th></tr></thead><tbody></tbody></table></div>');
         const $uploadTable = $('<table id="file-preview"><thead><tr><th>Datei</th><th>Neuer Name</th><th>Status</th></tr></thead><tbody></tbody></table>');
         const $uploadBtn = $('<button>📤 Hochladen</button>').prop('disabled', true);
         const $uploadButton = $('<button id="start-upload" disabled>📤 Hochladen</button>');
         const uploadQueue = [];
         let fileEntries = [];


         $form.before($preview);
        // Upload-Button und Tabelle einfügen
         $preview.after($uploadBtn);
         $uploadForm.before($uploadTable);
         $uploadForm.after($uploadButton);


         // ⛔️ Verhindert automatischen Upload
         // Verhindere Sofort-Upload
         $form.fileupload('option', 'autoUpload', false);
         $uploadForm.fileupload('option', 'autoUpload', false);


         function checkFileExists(name, callback) {
        // Datei-Existenzprüfung via MediaWiki-API
         function checkFileExists(fileName, callback) {
             $.get(mw.util.wikiScript('api'), {
             $.get(mw.util.wikiScript('api'), {
                 action: 'query',
                 action: 'query',
                 format: 'json',
                 format: 'json',
                 titles: 'File:' + name
                 titles: 'File:' + fileName
             }).done(function (res) {
             }).done(function (data) {
                 const exists = res.query.pages && !res.query.pages['-1'];
                 const exists = data.query.pages && !data.query.pages["-1"];
                 callback(exists);
                 callback(exists);
             });
             });
         }
         }


         function updateUploadButtonState() {
        // Prüft alle Dateien in der Liste neu (nach Umbenennung)
             const allClear = uploadQueue.every(entry => entry.status.text() === '✅ OK');
         function recheckAll() {
            $uploadBtn.prop('disabled', !allClear);
             let allValid = true;
 
            fileEntries.forEach(entry => {
                const newName = entry.input.val().trim();
                checkFileExists(newName, function (exists) {
                    if (exists) {
                        entry.status.text('⚠️ Existiert');
                        entry.row.css('background-color', '#ffe0e0');
                        allValid = false;
                    } else {
                        entry.status.text('✅ OK');
                        entry.row.css('background-color', '#e0ffe0');
                    }
                    // Nur Button aktivieren, wenn alle Namen OK sind
                    $uploadButton.prop('disabled', !fileEntries.every(en =>
                        en.status.text() === '✅ OK'
                    ));
                });
            });
         }
         }


         $form.on('fileuploadadd', function (e, data) {
        // Drag & Drop: Dateien hinzufügen
             data.files.forEach(file => {
         $uploadForm.on('fileuploadadd', function (e, data) {
            fileEntries = []; // Reset
 
            $uploadTable.find('tbody').empty();
             data.files.forEach((file, index) => {
                const defaultName = file.name;
                 const row = $('<tr></tr>');
                 const row = $('<tr></tr>');
                const originalName = file.name;
                 const input = $('<input type="text">').val(defaultName);
                 const input = $('<input type="text">').val(originalName);
                 const status = $('<td></td>');
                 const status = $('<td>🔍 Prüfe …</td>');


                 row.append($('<td>').text(originalName));
                 const nameCell = $('<td></td>').append(input);
                 row.append($('<td>').append(input));
                 row.append($('<td></td>').text(file.name)); // Originalname
                row.append(nameCell);
                 row.append(status);
                 row.append(status);
                 $preview.find('tbody').append(row);
                 $uploadTable.find('tbody').append(row);
 
                const entry = {
                    file: file,
                    data: data,
                    input: input,
                    status: status,
                    row: row
                };


                 const entry = { file, data, input, status, row };
                 fileEntries.push(entry);
                uploadQueue.push(entry);


                 // Erste Prüfung
                 // Erste Prüfung
                 checkFileExists(input.val(), function (exists) {
                 checkFileExists(defaultName, function (exists) {
                     if (exists) {
                     if (exists) {
                         status.text('⚠️ Existiert');
                         status.text('⚠️ Existiert');
                         row.css('background', '#ffe0e0');
                         row.css('background-color', '#ffe0e0');
                     } else {
                     } else {
                         status.text('✅ OK');
                         status.text('✅ OK');
                         row.css('background', '#e0ffe0');
                         row.css('background-color', '#e0ffe0');
                     }
                     }
                     updateUploadButtonState();
                     $uploadButton.prop('disabled', !fileEntries.every(en =>
                        en.status.text() === '✅ OK'
                    ));
                 });
                 });


                 // Bei Namensänderung neu prüfen
                 // Wenn Benutzer Namen ändert, neu prüfen
                 input.on('input', function () {
                 input.on('input', function () {
                     const newName = input.val().trim();
                     recheckAll();
                    checkFileExists(newName, function (exists) {
                        if (exists) {
                            status.text('⚠️ Existiert');
                            row.css('background', '#ffe0e0');
                        } else {
                            status.text('✅ OK');
                            row.css('background', '#e0ffe0');
                        }
                        updateUploadButtonState();
                    });
                 });
                 });
             });
             });
         });
         });


         // Upload starten
         // Upload starten bei Klick
         $uploadBtn.on('click', function (e) {
         $uploadButton.on('click', function (e) {
             e.preventDefault();
             e.preventDefault();
             uploadQueue.forEach(entry => {
             fileEntries.forEach(entry => {
                 const formData = new FormData();
                 const formData = new FormData();
                 formData.append('file', entry.file);
                 formData.append('file', entry.file);
                 formData.append('filename', entry.input.val().trim());
                 formData.append('filename', entry.input.val().trim());
                // Optional: weitere Parameter, wie Edit-Summary oder Watch
                 formData.append('token', mw.user.tokens.get('csrfToken'));
                 formData.append('token', mw.user.tokens.get('csrfToken'));
                 formData.append('action', 'upload');
                 formData.append('action', 'upload');
                 formData.append('format', 'json');
                 formData.append('format', 'json');
                 formData.append('ignorewarnings', '1');
                 formData.append('ignorewarnings', '1'); // optional


                 $.ajax({
                 $.ajax({
Zeile 90: Zeile 116:
                     processData: false,
                     processData: false,
                     contentType: false,
                     contentType: false,
                     success: function () {
                     success: function (res) {
                         entry.status.text('✅ Hochgeladen');
                         entry.status.text('✅ Hochgeladen');
                         entry.row.css('background', '#d0f0d0');
                         entry.row.css('background-color', '#d0f0d0');
                     },
                     },
                     error: function () {
                     error: function () {
                         entry.status.text('❌ Fehler');
                         entry.status.text('❌ Fehler');
                         entry.row.css('background', '#fdd');
                         entry.row.css('background-color', '#fdd');
                     }
                     }
                 });
                 });

Aktuelle Version vom 13. Juni 2025, 10:56 Uhr

if (mw.config.get('wgCanonicalSpecialPageName') === 'BatchUpload') {
    $(function () {
        const $uploadForm = $('#fileupload');
        const $uploadTable = $('<table id="file-preview"><thead><tr><th>Datei</th><th>Neuer Name</th><th>Status</th></tr></thead><tbody></tbody></table>');
        const $uploadButton = $('<button id="start-upload" disabled>📤 Hochladen</button>');
        let fileEntries = [];

        // Upload-Button und Tabelle einfügen
        $uploadForm.before($uploadTable);
        $uploadForm.after($uploadButton);

        // Verhindere Sofort-Upload
        $uploadForm.fileupload('option', 'autoUpload', false);

        // Datei-Existenzprüfung via MediaWiki-API
        function checkFileExists(fileName, callback) {
            $.get(mw.util.wikiScript('api'), {
                action: 'query',
                format: 'json',
                titles: 'File:' + fileName
            }).done(function (data) {
                const exists = data.query.pages && !data.query.pages["-1"];
                callback(exists);
            });
        }

        // Prüft alle Dateien in der Liste neu (nach Umbenennung)
        function recheckAll() {
            let allValid = true;

            fileEntries.forEach(entry => {
                const newName = entry.input.val().trim();
                checkFileExists(newName, function (exists) {
                    if (exists) {
                        entry.status.text('⚠️ Existiert');
                        entry.row.css('background-color', '#ffe0e0');
                        allValid = false;
                    } else {
                        entry.status.text('✅ OK');
                        entry.row.css('background-color', '#e0ffe0');
                    }
                    // Nur Button aktivieren, wenn alle Namen OK sind
                    $uploadButton.prop('disabled', !fileEntries.every(en =>
                        en.status.text() === '✅ OK'
                    ));
                });
            });
        }

        // Drag & Drop: Dateien hinzufügen
        $uploadForm.on('fileuploadadd', function (e, data) {
            fileEntries = []; // Reset

            $uploadTable.find('tbody').empty();
            data.files.forEach((file, index) => {
                const defaultName = file.name;
                const row = $('<tr></tr>');
                const input = $('<input type="text">').val(defaultName);
                const status = $('<td>⏳</td>');

                const nameCell = $('<td></td>').append(input);
                row.append($('<td></td>').text(file.name)); // Originalname
                row.append(nameCell);
                row.append(status);
                $uploadTable.find('tbody').append(row);

                const entry = {
                    file: file,
                    data: data,
                    input: input,
                    status: status,
                    row: row
                };

                fileEntries.push(entry);

                // Erste Prüfung
                checkFileExists(defaultName, function (exists) {
                    if (exists) {
                        status.text('⚠️ Existiert');
                        row.css('background-color', '#ffe0e0');
                    } else {
                        status.text('✅ OK');
                        row.css('background-color', '#e0ffe0');
                    }
                    $uploadButton.prop('disabled', !fileEntries.every(en =>
                        en.status.text() === '✅ OK'
                    ));
                });

                // Wenn Benutzer Namen ändert, neu prüfen
                input.on('input', function () {
                    recheckAll();
                });
            });
        });

        // Upload starten bei Klick
        $uploadButton.on('click', function (e) {
            e.preventDefault();
            fileEntries.forEach(entry => {
                const formData = new FormData();
                formData.append('file', entry.file);
                formData.append('filename', entry.input.val().trim());

                // Optional: weitere Parameter, wie Edit-Summary oder Watch
                formData.append('token', mw.user.tokens.get('csrfToken'));
                formData.append('action', 'upload');
                formData.append('format', 'json');
                formData.append('ignorewarnings', '1'); // optional

                $.ajax({
                    url: mw.util.wikiScript('api'),
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        entry.status.text('✅ Hochgeladen');
                        entry.row.css('background-color', '#d0f0d0');
                    },
                    error: function () {
                        entry.status.text('❌ Fehler');
                        entry.row.css('background-color', '#fdd');
                    }
                });
            });
        });
    });
}